vue3父组件中使用弹框子组件中关闭弹框

子组件：

<template>
  <a-modal :visible="visible" @cancel="handleCancel" width="358px" :footer="null">
    <p class="">
    <div>密码登录</div>
    <div>验证码登录</div>
    </p>
    <p>
      <span>手机号码</span>
      <a-input :value="inputValue" placeholder="请输入手机号" />
    </p>
    <p>
    <div>
      登录
    </div>
    </p>
  </a-modal>
</template>
<script setup>
import { defineProps, defineEmits, computed, reactive, ref, watch } from 'vue';
let props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

let inputValue = ref('');
//子组件显隐状态
let visible = ref(props.visible);

const emit = defineEmits();

// 弹窗关闭
const handleCancel = (e) => {
  visible.value = false;
  // 传给父组件
  emit('handleCancel',false);
}

// 监听修改，接收父组件的值
watch(() => props.visible, (newVal) => {
  visible.value = newVal;
});

</script>

<style lang="scss">
</style>

父组件

<template>
	<div class="sign-in-wrapper" @click="LoginRegister">登录/注册</div>
	
	<!-- 子组件 -->
    <loginModal :visible="visible" @handleCancel="handleCancel"></loginModal>
</template>

<script>
import { defineComponent, computed, reactive, ref } from 'vue';
import loginModal from '@/components/loginModal.vue';
export default defineComponent({
    components: {
        loginModal
    },
    setup() {
    	// 是否显示弹窗
        const visible = ref(false);

        // 登录/注册 事件
        const LoginRegister = () => {
            visible.value = true;
        };
        // 关闭弹窗
        const handleCancel = (e) => {
            visible.value = e;
        }

        return {
            LoginRegister,
            handleCancel,
            visible
        };
    }
});
</script>
<style lang="scss">
</style>

:value是属性绑定，用于将父组件的值传递给子组件，并且是只读的。这意味着当父组件的值改变时，子组件的值也会相应地改变，但是子组件无法直接修改这个值。
v-model:value是语法糖，它在内部相当于:value和@input的结合。它不仅可以将父组件的值传递给子组件，还可以在子组件中修改这个值并将修改后的值传递回父组件
:value用于单向数据流，将父组件的值传递给子组件；而v-model:value用于双向数据绑定，既可以传递值给子组件，也可以接收子组件修改后的值。