vue动态引入组件

最新推荐文章于 2024-08-16 10:28:05 发布

似是旧人归

最新推荐文章于 2024-08-16 10:28:05 发布

阅读量2.6k

点赞数

分类专栏： vue 文章标签：动态组件

本文链接：https://blog.csdn.net/weixin_45000975/article/details/101547363

版权

vue 专栏收录该内容

9 篇文章 2 订阅

订阅专栏

vue动态引入组件

	<el-main>
      <component
        :is="selectIndex"
        @changeMenu="selectMenu"
        :id="componentId"
      ></component>
    </el-main>


<script>
import Vue from "vue";
export default {
  name: "Index",
  components: {
    cardList: resolve => require(["@/components/memberCard/cardList"], resolve),
    addCard: resolve => require(["@/components/memberCard/addCard"], resolve),
    postList: resolve => require(["@/components/message/postList"], resolve),
    sotreAdd: resolve => require(["@/components/storeAdmin/serviceItem/add"], resolve),
    sotreList: resolve => require(["@/components/storeAdmin/serviceItem/list"], resolve),
  },
  data() {
    return {
      loading:true,
      componentId: 0,
      menus: [],
      currentComponent:"cardList",
      selectIndex: "cardList",
    };
  },
  methods: {
    selectMenu(index, value) {  
      console.log(index,value,"vave")
      this.selectIndex = index;
      if( value != undefined ){
        this.componentId = value.id
      }
      
    },
    
  },
  created() {
    //this.test();
    this.loading = true;
    this.$ajax
      .get("/api/home")
      .then(result => {
        console.log("api-home", result);
        this.siteName = result.data.siteName;
        this.userName = result.data.userName;
        this.menus = result.data.menus;
        //注册组件
        result.data.menus.forEach(menu => {
          menu.items.forEach(item => {
            console.log("222222",item);
            Vue.component(item.index, function(resolve) {
              console.log("1111111",item.path);
              require([`${item.path}`], resolve);
            });
          });
        });
      })
      .finally(res => {
        console.log(res);
        this.loading = false;
      });
  }
};
</script>