components 根据type类型加载不同的组件

最新推荐文章于 2022-11-24 17:25:45 发布

qq_41091678

最新推荐文章于 2022-11-24 17:25:45 发布

阅读量343

点赞数

本文链接：https://blog.csdn.net/qq_41091678/article/details/118570323

版权

本文探讨了如何在Vue.js应用中使用`v-for`和`:is`指令动态加载组件，如Menu1和Menu2，并结合`computed`属性实现组件数据的绑定。通过这种方式，可以灵活地根据数据类型实例化不同的组件，实现代码的复用和动态渲染。

摘要由CSDN通过智能技术生成

 <!--
       :is="item.type" 根据当前类型加载不同的组件
      -->
    <component v-for="(item, index) in componentData" :key="index" :is="item.type" :itemData="item.itemData"></component>

 components: {
   Menu1: () => import("../Menu1/index"), //1
    Menu2: () => import("../Menu2/index"), //2
  },

  computed: {
    ...mapGetters(["name",]),
    componentData() {
      return [
        { type: "Menu1", itemData: Menu1Data }, //1
        { type: "Menu2", itemData: Menu2Data }, //2
      ];
    },
  },