vue 子组件触发父组件事件sync修饰符与$emit(update:xxx)

子组件触发

  <el-dialog title="编辑" :visible.sync="visible" v-if="visible" width="500px" append-to-body>

	export default {
		name: 'BoxDialog',
		props: {
			status: Boolean,
		},

		computed: {
			visible: {
				get() {
					return this.status;
				},
				set(val) {
					this.$emit('update:status', val); // visible 改变的时候通知父组件
				},
			},
		},

父组件监听子组件

    <BoxDialog :printerInfo="sendDialogData" @update:status="closeSignDialogHandle" :status.sync="rankingEnergyBoxView"/>

打开对话框

    // 打开编辑对话框
    lease(){
      this.sendDialogData = rowData
      this.rankingEnergyBoxView = true
    },

监听对话框

  methods: {
    // 监听对话框的关闭
    closeSignDialogHandle(val){
      if (val===false) {
        // 对话框关闭了
      }
    },