【vue2】按需引入多个组件的写法

最新推荐文章于 2024-07-07 14:47:47 发布

湛海不过深蓝

最新推荐文章于 2024-07-07 14:47:47 发布

阅读量461

点赞数

文章标签： java linux 服务器

本文链接：https://blog.csdn.net/bbt953/article/details/132385786

版权

可以使用component标签, :is="组件名"，:dialogTitle="dialogTitle"和:rowInfo="offlineRow"就是父给子传值的写法

<component
  :is="currentComponent"
  ref="currentComponentRef"
  :dialogTitle="dialogTitle"
  :rowInfo="offlineRow"
></component>

引入子组件，也不要直接import，这样引入就等于加载该组件，只是因为display: none而没有显示罢了，用按需加载，需要才引用

async handleCreateApp(isadd, json, orderTypeCodeName) {
	let component = await import(
        "@/pages/appManage/appList/components/operate/CreateApp.vue"
    );
    // component.default就是拿到当前组件，赋值给:is即可
    this.currentComponent = component.default;
}

此处时当前写法下使用ref父给子传值

handleOpenApi(formData) {
  this.$nextTick(() => {
  	// 通过ref的方式调用子组件里面数据或方法 
    this.$refs.currentComponentRef.dialogVisible = true;
    this.$refs.currentComponentRef.ruleForm = JSON.parse(formData);
  });
},