其他分享
首页 > 其他分享> > 动态组件(component)的使用场景

动态组件(component)的使用场景

作者:互联网

动态组件component标签是vue的一个内置组件,通过动态地设置is属性,渲染出对应的组件

使用方法:

1、components/MyText.vue:

<template>
  <div>
    文本组件
  </div>
</template>

components/MyImage.vue:

<template>
  <div>
    图片组件
  </div>
</template>

components/MyVideo.vue:

<template>
  <div>
    媒体组件
  </div>
</template>

2、App.vue:

<template>
  <div id="app">
    <div v-for="(item,index) in list" :key="index">
      <component :is='item.componentType'></component>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        { componentType: 'MyVideo' },
        { componentType: 'MyImage' },
        { componentType: 'MyText' },
        { componentType: 'MyImage' },
        { componentType: 'MyText' }
      ]
    }
  },
  components: {
    MyText: () =>
      import(/* webpackChunkName: 'MyText' */ '@/components/MyText'),
    MyImage: () =>
      import(/* webpackChunkName: 'MyImage' */ '@/components/MyImage'),
    MyVideo: () =>
      import(/* webpackChunkName: 'MyVideo' */ '@/components/MyVideo')
  }
}
</script>

  1、组件可以根据list中定义的顺序来渲染

  2、使用动态组件时,组件的引入最好使用异步组件的方式引入

  

 

标签:场景,MyVideo,component,MyText,MyImage,vue,components,组件
来源: https://www.cnblogs.com/wuqilang/p/15134504.html