Vue动态加载组件
vue动态加载组件
·
首先我们回顾以下静态的组件加载方式
首先是创建组件文件
然后在需要使用的页面中引入并注册
然后就可以在页面中使用
这是静态引入的做法,那我们看看要动态引入组件是怎么做的
先写一个简单的子组件
<template>
<div>
<h2>我是子组件</h2>
</div>
</template>
<script>
export default{
name:"test",
data(){
return{
}
}
}
</script>
<style>
</style>
动态引入需要通过<component>元素加上is的特征来实现
<template>
<div>
<h1>我是父组件</h1>
<component v-bind:is="MyComponent"></component>
</div>
</template>
然后再在MyComponent这里引入组件就行
data(){
return{
MyComponent:() => import('../components/test.vue')
}
}
效果展示
需要源码的同学可以在这里下载
更多推荐
已为社区贡献2条内容
所有评论(0)