这篇文章主要介绍了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>
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注北冥有鱼的更多内容！
