Vue父子组件

最新推荐文章于 2023-07-27 11:29:08 发布

weixin_43805387

最新推荐文章于 2023-07-27 11:29:08 发布

阅读量148

点赞数

本文链接：https://blog.csdn.net/weixin_43805387/article/details/102746863

版权

父组件

触发并初始化组件

          this.settingTableVisible = true;
          this.tableNodeObjTemp = part.data
          this.$nextTick(() => {
            this.$refs.settingTable.init(part.data);
          });

父组件展示位置

 <setting-table v-if="settingTableVisible"  :nodeObjTemp="tableNodeObjTemp"
                   @submit-update="changeNode"
                   @execute="execute" ref="settingTable"></setting-table>

引用子组件

import SettingTable from "./setting-table"; //数据表设置弹窗

components: {
      SettingTable, //数据表设置弹窗
    },

子组件

接受父组件参数

props: {
      nodeObjTemp: {},
    },

props: ["idName","jobId"],

初始化

init(data) {
     this.visible = true
      },

在这里插入图片描述

返回父组件

save(){
        this.visible = false;
        this.nodeObjTemp.nodeTaskType = this.specialalgorithmId;
        this.$emit("submit-update", this.nodeObjTemp);
      },