Vue3子组件双向绑定父组件传的Props-笔记

1.父组件

1.1 template 部分

<template>
    <AdvancedSearchModal v-model:visible="advancedModalVisible"  />
</template>

1.2 js 部分

// 是否显示高级检索对话框
<script>
    const advancedModalVisible = ref<boolean>(false);
</script>

2.子组件

2.1 template 部分

<template>
    <a-modal v-model:visible="modalVisible" width="50%" title="高级检索" @ok="handleOk">
        ......
    </a-modal>
</template>

2.2 js 部分

<script>
    //   定义props父组件传入属性
    interface Props {
      visible: boolean;
    }
    const props = defineProps<Props>();

    //   定义emit自定义事件
    interface Emits {
      (e: 'update:visible', visible: boolean);
    }
    const emit = defineEmits<Emits>();

    /** 定义计算属性-是否显示弹框 */
    const modalVisible = computed({
      get: () => props.visible,
      set: (newVal) => {
        emit('update:visible', newVal);
      },
    });
</script>

3.步骤

1. 子组件创建prop，父组件绑定子组件的prop将值传给子组件
2. 定义自定义事件emit，事件名为 'update:prop的属性名'
3. 定义计算属性，使用getter函数触发'update:xxx'事件，并将新的值座位参数传给父组件