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();
},这样完成了组件之间的传值。
