脚本宝典收集整理的这篇文章主要介绍了vue components 动态组件详解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
数组发生变化时，动态加载相应数据
场景：点击不同组件名称，界面显示相应组件
步骤一：导入所需组件
步骤二：点击 tab 选项卡，将对应组件名添加进数组
步骤三：使用动态组件，:is 属性绑定组件名
<div v-for="(ITem, index) in componentData" :key="index"> <components :is="item.COMponentName"/> </div>
案例：监听对象中属性变化，深度监听
<!-- DynamicComponent.vue --> <template> <section> <div v-for="(item, index) in componentData" :key="index"> <components :is='item.componentName' :params="item.content" /> </div> </section> </template> <script> import PageOne From './pageComponents/PageOne' import PageTwo from './pageComponents/PageTwo' import PageThree from './pageComponents/PageThree' export default{ name: 'DynamicComponent', components: { PageOne, PageTwo, PageThree }, data () { return { componentData: [ { componentName: 'PageOne', content: { title: '标题一' } }, { componentName: 'PageTwo', content: { title: '标题二' } } ] } } } </script>
<!-- PageOne -->
<template>
<section>
{{content}}
</section>
</template>
<script>
export default{
name: 'PageOne',
PRops: {
params: {
tyPE: Object,
default: function(){
return {}
}
}
},
data () {
return {
content: this.params.title
}
},
watch: {
params: {
handler(newVal, oldVal){
this.content = newVal.title
},
deep: true,
immediate: true
}
}
}
</script>
<!-- PageTwo -->
<template>
<section>
{{content}}
</section>
</template>
<script>
export default{
name: 'PageTwo',
props: {
params: {
type: Object,
default: function(){
return {}
}
}
},
data () {
return {
content: this.params.title
}
},
watch: {
params: {
handler(newVal, oldVal){
this.content = newVal.title
},
deep: true,
immediate: true
}
}
}
</script>
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本宝典的更多内容！
数组发生变化时，动态加载相应数据
场景：点击不同组件名称，界面显示相应组件
步骤一：导入所需组件
步骤二：点击 tab 选项卡，将对应组件名添加进数组
步骤三：使用动态组件，:is 属性绑定组件名
<div v-for="(item, index) in componentData" :key="index"> <components :is="item.componentName"/> </div>
案例：监听对象中属性变化，深度监听
<!-- DynamicComponent.vue -->
<template>
<section>
<div v-for="(item, index) in componentData" :key="index">
<components :is='item.componentName' :params="item.content" />
</div>
</section>
</template>
<script>
import PageOne from './pageComponents/PageOne'
import PageTwo from './pageComponents/PageTwo'
import PageThree from './pageComponents/PageThree'
export default{
name: 'DynamicComponent',
components: {
PageOne,
PageTwo,
PageThree
},
data () {
return {
componentData: [
{
componentName: 'PageOne',
content: {
title: '标题一'
}
},
{
componentName: 'PageTwo',
content: {
title: '标题二'
}
}
]
}
}
}
</script>
<!-- PageOne -->
<template>
<section>
{{content}}
</section>
</template>
<script>
export default{
name: 'PageOne',
props: {
params: {
type: Object,
default: function(){
return {}
}
}
},
data () {
return {
content: this.params.title
}
},
watch: {
params: {
handler(newVal, oldVal){
this.content = newVal.title
},
deep: true,
immediate: true
}
}
}
</script>
<!-- PageTwo -->
<template>
<section>
{{content}}
</section>
</template>
<script>
export default{
name: 'PageTwo',
props: {
params: {
type: Object,
default: function(){
return {}
}
}
},
data () {
return {
content: this.params.title
}
},
watch: {
params: {
handler(newVal, oldVal){
this.content = newVal.title
},
deep: true,
immediate: true
}
}
}
</script>
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本宝典的更多内容！
以上是脚本宝典为你收集整理的vue components 动态组件详解全部内容，希望文章能够帮你解决vue components 动态组件详解所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。