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

留言