vue动态组件

Posted 2021-06-19 嘴巴嘟嘟

动态组件component的用法
component会接收一个名为"is"的属性

is的属性值应该为在父组件中注册过的组件的名称

用法如下:

  <component v-bind:is="view"></component> //view 是变量

案例

<template>
  <div>
    <div v-for="value in productData" :key="value.id">
      <component :is="`My${value.type}`"></component>
    </div>
  </div>
</template>

<script>
import Video from "./动态组件/Video.vue";
import Text from "./动态组件/Text.vue";
import Image from "./动态组件/Image.vue";
export default {
  name: "Slot",
  components: {
    CurrenUser,
    MyText: Text,
    MyVideo: Video,
    MyImage: Image,
  },
  data() {
    return {
      productData: [
        {
          id: 1,
          type: "Video",
        },
        {
          id: 2,
          type: "Text",
        },
        {
          id: 3,
          type: "Image",
        },
      ],
    };
  },
};
</script>

<style  scoped>
</style>