弹窗组件的数据传递、状态修改、数据提交

父组件

    <!--新增 -->
    <add
      :modal-data="adddata"
      @close="onAdd"
      @submit="onAddModalSubmit"
      />

data(){
    adddata: {
      title: '',
      type: 'add',
      visible: false,
      data: {},
    },
}

onAdd() {
  this.adddata = {
    visible: false,
    type: 'add',
    title: '',
    data: {},
  };
},

// 提交
onAddModalSubmit({ result, type, index }) {
  console.log(result, type, index);
     // 此处理可以做一些数据收集提交后台接口的步骤
     // 或者修改一下父组件中的状态，清空子组件中的数据等等
     // 或者重新调用父组件中的刷新方法
  
},

父组件中可以通过监听datassr值的变化来判断弹窗情况

子组件

<template>
  <el-dialog
    v-dialogDrag
    append-to-body
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :title="modalData.title"
    :visible.sync="visible">

    <!-- 一级子组件用来汇总下一级子组件提交的数据 -->
    <Information
      ref="information"
      :props-data="basicData"
      :read-only="readOnly"
      />

    <div slot="footer" class="dialog-footer" v-else>
      <el-button size="mini" @click="onCancl">取 消</el-button>
      <el-button size="mini" type="primary" @click="onOk">确 定</el-button>
    </div>
  </el-dialog>
</template>

computed: {

    // 利用计算属性传值
    basicData() {
      return {
        ...this.外部值.data,
      };
    },
    
    }
    //也可以做一些当前状态的监听
  

    ok2() {
      const aaa = [
        this.$refs.son.doSubmit(),
      ];
        Promise.all(aaa)
    .then((result) => {
      let params = result.reduce((beforeResult, current) => ({ ...beforeResult, ...current }), {});
      params = {
        ...this.datassr.data, // 编辑的情况下，回传id等参数
        ...params,
      };
        // 抛出点击确认后的方法给外部主件调用，和判断当前页面状态
      this.$emit('submit', {
        result: params,
        type: this.datassr.type,
        index: this.datassr.index,
      });
      this.visible = false;
    }).catch((error) => {
      console.log(error);
    });
},

子子组件

    
    computed： {
        editData() {
          return { ...this.外部值.data };
        },
    }
    
    mounted() {
      this.$watch('editData', {
        immediate: true,
        handler(val = {}) {
                // 可以进行一些赋值操作
          });
        },
      });
    },

    doSubmit() {
        值的对外部传递
    }

elment中的

<el-tabs v-model="activeTab" type="border-card">
  <el-tab-pane label="页签一" name="busi">
    <one
      ref="one"
      :props-data="onekData"
      :read-only="readOnly"
    />
  </el-tab-pane>

  <el-tab-pane label="页签二" name="relate">
    <two
      ref="two"
      :props-data="twoData"
      :read-only="readOnly"
    />
  </el-tab-pane>
</el-tabs>

    activeTab的值为多少，默认打开的页面就是哪一个

    activeTab: 'onekData',