vue3子组件向父组件传递消息

vue3子组件向父组件传递消息

除了vuex这个万用方法外，子组件向父组件传递消息可以通过emit的方式。以控制弹窗的关闭为例
在vue3中， emits的定义是与component、setup等这些属性是同级
1、首先需要在emits中先注册，emits此时是作为数组，它也可以接收一个对象。如果没有注册，会给父组件反馈两次。

import { ref} from 'vue'
export default {  
    emits: ['DialogClose'],//注册
    setup(props: any, { emit }: any) {
     
        let isShowDialog = ref(false);
        function closeDialog() {
            emit("DialogClose", isShowDialog.value);
        }
        return {
            closeDialog
        }
    }
}

2、需要从setup函数中引出{emit}
3、父组件进行接收

 <div class="mask" v-if="isShowDialog">
        <Dialog @DialogClose="DialogClose"></Dialog>
    </div>

 components: {
        Dialog
    },
setup(props: any, { emit }: any) {
        let isShowDialog = ref(false);
        function DialogClose(data) {
            isShowDialog.value = data
        }
        return {
            DialogClose
        }
    }