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 动态组件详解

转载请保留出处和原文链接：https://www.cnhackhy.com/146771.htm

相关文章

• vue3 父子组件传值详解
• React创建组件的的方式汇总
• Vue之TodoList案例详解
• Vue实现路由嵌套的方法实例
• Vue之组件详解