AI 可以教你 VUE 的寫法,舉例來說我問「這個函數是寫在 VUE 父元件上,如何在子元件上用類似 this.callSnackbar("文字"); 的方式呼叫它?」,ChatGPT 這樣回答我:
要在子元件中調用父元件的方法,可以透過 $emit 事件來實現。在父元件中,可以在子元件上監聽事件,並在事件處理程序中調用所需的方法。 在你的情況下,可以將 callSnackbar 方法作為父元件的方法,並在子元件中觸發事件來調用它。例如,在子元件中,可以使用以下程式碼觸發事件:
this.$emit('show-snackbar', '文字');
這將觸發名為 show-snackbar 的事件,並傳遞文本「文字」作為參數。在父元件中,你可以像這樣監聽該事件:
<template>
<div>
<child-component @show-snackbar="callSnackbar"></child-component>
<snackbar v-if="snackbar" :message="notificationMessage"></snackbar>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
import Snackbar from './Snackbar.vue';
export default {
components: {
ChildComponent,
Snackbar,
},
data() {
return {
snackbar: false,
notificationMessage: '',
};
},
methods: {
callSnackbar(text) {
this.snackbar = true;
this.notificationMessage = text;
},
},
};
</script>
在上述程式碼中,callSnackbar 方法被傳遞給子元件作為事件處理程序。當子元件觸發 show-snackbar 事件時,該方法將被調用,並顯示通知訊息。
※ 備註:本人使用 VUE 2