vue components 动态组件详解

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› JavaScript›JavaScript编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

<!-- 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>