Vue 3.2 defineEmits 用法

• 父元件

傳遞方法使用@

<template>
   ...
   <Login @modalClose="modalClose"/>
   ...
</template>

<script setup>

    const _modal = ref();
    
    function modalShow(modalId){
        let modal = document.getElementById(modalId);
        modal.style.display = "block";
        _modal.value = modal;
    }


    function modalClose(){
        _modal.value.style.display = "none";
    }
    

</script>

• 子元件 Login.vue

按下Login按鈕後，call父元件的modalClose方法。

<template>
   ...
   <input type="button" value="Login" @click="login()">
   ...
</template>

<script setup>

const emit = defineEmits(["modalClose"]);  //接收父組件傳來的方法

...​

function login(){
   emit("modalClose");
}

</script>

本筆記參考:

1. https://juejin.cn/post/7046940339621330974