组件弹框传值

 1.引入组件

// 编辑干部弹窗
import edit from "../../components/rm/edit.vue";

2.注册组件

components: {
    edit,
  },

3.使用组件

 <edit ref="edit" :visible.sync="editVisible" :rmid="UpFileData.id" :width="editWidth" @cancel="closeEdit"
      @confirm="confirmEdit" @before-close="beforeEdit"></edit>

这段代码是一个自定义组件 <edit> 的调用，它有以下属性：
- ref：组件的引用名称，可以在父组件中通过 $refs 访问该组件实例。
- :visible.sync：一个布尔值，用于控制组件的显示和隐藏。
- :rmid：一个数字，用于传递任免 ID。
- :width：一个字符串，用于设置组件的宽度。
- @cancel：一个回调函数，当用户点击取消按钮时触发。
- @confirm：一个回调函数，当用户点击确认按钮时触发。
- @before-close：一个回调函数，当组件即将关闭时触发。

4.在子组件中

 <el-dialog :title="xm" :visible.sync="visible" :width="width" :before-close="beforeClose">
    <slot>

 这段代码是一个Vue组件中的模板代码，用于渲染一个弹出框。具体来说，这个弹出框的标题是由组件中的变量xm决定的，它的可见性由变量visible控制，宽度由变量width控制，关闭前会调用beforeClose函数。

5.通过props来接收，同样需要一个open方法，this.visible = true;父组件可以通过ref调用open来打开弹窗，同样通过open来传值

 props: {
    width: {
      type: String,
      default: "50%"
    },
    rmid:{
      type:Number,
      default:0
    }
  },

--------------------
 open(row) {
      console.log('row',row);
      this.visible = true;
    },

 

6.在子组件中通过refs.open打开组件弹窗

    <el-button @click="ShowEdit(scope.row)" type="text" size="small">编辑</el-button> 

 ShowEdit(row) {
      this.$refs.edit.open(row);
    },
    closeEdit() {
      this.editVisible.close();
    },
    confirmEdit() {
      this.editVisible = false;
      this.getCadres(this.UpFileData.id);
    },
    beforeEdit(done) {
      // 处理关闭对话框的逻辑
      done();
    },

这样完成了组件之间的传值。