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>
    

留言