Vue3 單檔案元件(SFC)：如何在父層中執行子元件函式 function

在專案中我們會將頁面中可以復用的部分拆分開來，組成元件。而有的時候我們會需要執行子元件內的 functin，例如有個元件是確認視窗，檔案名稱為 ConfirmationModal.vue ，我們需要在 App.vue 中使用呼叫元件內部的方法開啟

在子元件 ConfirmationModal.vue 要增加的部分只有一個，就是使用 defineExpose 將 function 暴露出去:

    
<script setup>

function ShowModal() {
  console.log('ShowModal');
}

defineExpose({
  ShowModal,
})

</script>
    

父層 App.vue 的程式碼：

    
<template>
  <confirmation-modal ref="confirmationModal"></confirmation-modal>
  <button v-on:click="callShowModal">callShowModal</button>
</template>

<script setup>

import {defineComponent, ref} from "vue";
import ConfirmationModal from "@/components/ConfirmationModal.vue";

defineComponent({
  components: {'confirmation-modal': ConfirmationModal}
})

const confirmationModal = ref(null); // 綁定子元件

function callShowModal() {
  // 執行子元件的 ShowModal function
  confirmationModal.value.ShowModal();
}

</script>
    

在我們呼叫子元件 function 的 function 中只有一行，那為什麼不直接在 button 中呼叫呢？當然可以，只是要注意在 html 中 ref 是不用 .value 的

    
<template>
  <confirmation-modal ref="confirmationModal"></confirmation-modal>
  <button v-on:click="confirmationModal.ShowModal">callShowModal</button>
</template>

<script setup>

import {defineComponent, ref} from "vue";
import ConfirmationModal from "@/components/ConfirmationModal.vue";

defineComponent({
  components: {'confirmation-modal': ConfirmationModal}
})

const confirmationModal = ref(null); // 綁定子元件

</script>