<!-- 通過：后面指定子組件接收的props名稱 -->
   <AddBook v-model:dialogVisible="addFormVisible"></AddBook>

<template>
  <el-dialog class="add-book-dialog" :title="target && target._id ? '編輯賬本': '添加賬本'"
             :close-on-click-modal="false"
             v-model="dialogVisibleData">
    <el-form :model="targetForm" :rules="rules" ref="bookForm">
     ...
    </el-form>
    <template #footer>
    <span class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="save">確 定</el-button>
    </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { reactive, ref, watch, toRefs, readonly, defineComponent } from 'vue';

export default defineComponent({
  // 觸發(fā)的事件的名稱
  emits: {
    'update:dialogVisible': (val: boolean) => {
      return val;
    }
  },
  props: {
   ...
    dialogVisible: { // 是否顯示模態(tài)框
      type: Boolean,
      default: false
    },
  },
  setup(props, { emit }) {
    const { dialogVisible } = toRefs(props) as any;
    let dialogVisibleData = ref(false);
    const cancel = () => {
      dialogVisibleData.value = false;
      // 可以直接emit update事件，也可以改變dialogVisibleData value值，觸發(fā)watch監(jiān)聽
      emit('update:dialogVisible', dialogVisibleData.value);
    };
    // 監(jiān)聽props中dialogVisible值
    watch(() => dialogVisible.value, (newValue: boolean, oldValue: boolean) => {
      dialogVisibleData.value = newValue;
      console.log(oldValue, newValue, '改變');
    });
    watch(() => dialogVisibleData.value, (newVal: boolean, oldVal: boolean) => {
      emit('update:dialogVisible', newVal);
    });
    return { dialogVisibleData, cancel };
  },
});
</script>