Vue3 component 單檔案元件(SFC) 向上傳遞資料(傳遞參數、觸發事件)

註：本篇使用 Composition API 和 script setup 語法糖(syntactic sugar)

在上一篇 Vue3 component 單檔案元件(SFC)示範(使用元件、傳入參數) 有示範將資料傳入到元件中，那元件能不能將資料回傳？

當然可以，我們會使用事件的方式「通知」上層的父元件。

這裡我們先使用 defineEmits 宣告會傳送的自定義事件名稱，建立一個按鈕，點擊時執行 click function，使用 emits 觸發自定義事件。

    
<template>
  <button v-on:click="click">update data</button>
</template>

<script setup>

const emits = defineEmits(['updateData']);

function click() {
  emits('updateData');
}

</script>
    

父元件在使用子元件時，需要使用 v-on 將子元件的自訂事件和父元件要被執行的事件綁定

    
<template>
  <user-data v-on:update-data="handleUpdateDate"></user-data>
</template>

<script setup>
import UserData from "@/components/UserData.vue";
import {defineComponent} from "vue";

defineComponent({
  components: {'user-data': UserData}
})

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

</script>
    

這樣在子元件點擊按鈕時在父元件就可以藉由自訂事件被觸發了！

向父元件傳遞資料

阿有事件還不夠阿，那資料呢？簡單，只要在觸發事件時帶入資料就好了！emits 第一個參數是事件名稱，第二個就是要傳遞的參數了！
這裡我們再加上一個 input ，將輸入框的內容傳遞給父元件：

    
<template>
  <input type="text" v-model="data"/>
  <button v-on:click="click">update data</button>
</template>

<script setup>
import {ref} from "vue";

const emits = defineEmits(['updateData']);
const data = ref('');

function click() {
  emits('updateData', data.value);
}

</script>
    

然後在父容器中直接就可以從綁定的方法中取得資料:

    
<template>
  <user-data v-on:update-data="handleUpdateDate"></user-data>
</template>

<script setup>
import UserData from "@/components/UserData.vue";
import {defineComponent} from "vue";

defineComponent({
  components: {'user-data': UserData}
})

function handleUpdateDate(data) {
  console.log('handleUpdateDate', data);
}

</script>
    

參考資料：

vuejs.org - <script setup> defineEmits