vue之动态注册并渲染组件---kalrry
vue之动态注册并渲染组件---kalrry简介:目录结构一、普通方法二、方案二三、方案三四、方案四简介:目录结构待完善补充index.vuedir{//目录文件夹comp1.vuecomp2.vue}一、普通方法按照常规做法是在index.vue中直接这样引入并注册:import comp1 from './dir/comp1.vue'import comp2 from './dir/comp2
·
简介:目录结构
待完善补充
index.vue
dir{
//目录文件夹
comp1.vue
comp2.vue
}
一、普通方法
按照常规做法是在index.vue中直接这样引入并注册:
import comp1 from './dir/comp1.vue'
import comp2 from './dir/comp2.vue'
....
export default {
components: {
comp1,
comp2...
}
}
存在问题:如果组件少还是很方便的,如果比较多比如30个, 100个,一个一个的import进来则很麻烦,因此如果能够动态遍历一个数组进行动态注册并渲染的话则很方便。
二、方案二
一个解决思路是在index.vue中利用Vue.component注册全局组件并用进行动态渲染
<template>
<div>
<component v-for="app in comps" :is="app"></component>
</div>
</template>
<script>
import Vue from 'vue'
export default {
data () {
return {
comps: ['comp1', 'comp2']
}
},
created () {
this.comps.forEach(app => {
Vue.components(app, res => require([`./dir/${app}.vue`], res))
})
}
}
</script>
存在问题:但是这样的话每个组件都注册成了全局的了,因此我们朝着注册成为局部组件的方向改进.
三、方案三
在index.vue中利用异步加载require + component标签
<template>
<div>
<component v-for="app in comps" :is="app"></component>
</div>
</template>
<script>
import Vue from 'vue'
export default {
data () {
return {
comps: ['comp1', 'comp2'],
apps: []
}
},
created () {
this.comps.forEach(app => {
this.apps.push({app: require(`./dir/${app}.vue`)})
})
}
}
</script>
四、方案四
利用render函数封装成一个类似于component标签的功能,还可以在其中进行一些扩展,
dir目录下新建一个文件asyncLoadComp.vue
<script>
export default {
render (h, cxt) {
return h(require(`./dir/${this.app}.vue`), {
props: {
prop: this.prop
}
})
},
props: {
app: String,
prop: Object
}
}
</script>
在index.vue中使用
<template>
<div>
<async-load-comp v-for="comp in comps" :app="comp" :prop="prop"></async-load-comp>
</div>
</template>
<script>
import asyncLoadComp from './asyncLoadComp.vue'
export default {
components: {
asyncLoadComp
},
data () {
return {
comps: ['comp1', 'comp2'],
prop: {name: '张三'}
}
}
}
</script>
更多推荐
已为社区贡献5条内容
所有评论(0)