Vue中的emit和input是兩個常用的功能,它們可以用于父子組件之間的通信。其中,emit是子組件向父組件傳遞數據的方式,而input則是父組件通過v-model在子組件中進行數據雙向綁定的方式。
下面是一個簡單的例子:
Vue.component('child', { template: ``, props: ['msg'], methods: { updateValue(e) { this.$emit('input', e.target.value); } } }); new Vue({ el: '#app', data: { message: 'Hello, Vue!' } });
這里,我們定義了一個子組件child和一個父組件。子組件child中有一個文本框元素,它的value屬性被綁定到了父組件傳遞過來的msg數據。當文本框中的值發生變化時,我們調用了updateValue方法,并通過this.$emit('input', e.target.value)向父組件傳遞了e.target.value的值。在父組件中,我們可以使用v-model來雙向綁定msg數據,這樣就可以實現子組件向父組件傳遞數據的功能。
對于父子組件通信,我們還可以使用props和$emit傳遞和接收值。在子組件中,我們使用$emit來發射一個自定義事件,然后在父組件中使用v-on來監聽這個事件。同時,我們也可以定義props來接收父組件傳來的值。下面是代碼實例:
Vue.component('child', { template: ``, methods: { updateValue() { this.$emit('my-event', '傳遞的數據'); } } }); new Vue({ el: '#app', data: { message: '' }, methods: { handleChildEvent(data) { this.message = data; } }, template: `` });{{ message }}
在這個例子中,我們定義了一個父組件和一個子組件child。父組件中有一個message數據和一個handleChildEvent方法,用來接收子組件發送的事件。在子組件中,我們定義了一個button元素,當點擊按鈕時,我們通過this.$emit來向父組件發送一個my-event事件。在父組件中,我們使用v-on來監聽這個事件,調用handleChildEvent方法來接收傳遞過來的數據,從而更新message數據。
總之,無論是emit還是input,都是Vue中極其常用的功能,能夠幫助我們在父子組件之間進行數據的傳遞和雙向綁定,以實現更加靈活和高效的組件通信。