Vue中的通信是非常重要的,這個特性可以讓組件之間進行有效的交互。
在Vue中,組件之間可以通過props和emit來進行通信。prop是父組件向子組件傳遞數據的方式,emit則是子組件向父組件傳遞信息。
Vue.component('child-component', { props: ['title'], template: '{{ title }}
' })
在這個例子中,我們定義了一個子組件child-component,并傳遞了一個title的prop值。在子組件中,我們通過{{ title }}來顯示這個prop值。
在父組件中,我們將子組件的模板放置在parent-component標簽內,并傳遞了一個title屬性給子組件。這樣就可以在父組件中控制子組件的顯示內容。
除了props和emit,Vue還提供了子組件之間通信的方法,這個方法是通過$emit和$on來實現的。$emit方法可以觸發一個事件,并且可以傳遞參數,而$on方法則用來監聽這個事件。
Vue.component('child-component-1', { template: '', data: function () { return { product: '商品1' } } }) Vue.component('child-component-2', { template: '{{ product }}已加入購物車', data: function () { return { product: '' } }, mounted: function () { var _this = this this.$parent.$on('add-to-cart', function (product) { _this.product = product }) } })
在這個例子中,我們定義了兩個子組件。在child-component-1中,我們定義了一個button,并在點擊按鈕的時候觸發了一個add-to-cart的事件,并傳遞了一個product參數;在child-component-2中,我們定義了一個div,并監聽了add-to-cart事件,并在事件觸發后顯示product參數。
在child-component-2中,我們使用mounted鉤子函數來注冊事件監聽器,并使用this.$parent.$on來監聽add-to-cart事件。這里要注意的是,this.$parent指的是child-component-2的父組件,在這個例子中就是parent-component。
除了這些方法,Vue還提供了一個全局事件總線的方法,這個方法可以讓任意兩個組件之間進行通信。這個方法是通過Vue.prototype.$bus來實現的。
var bus = new Vue() Vue.prototype.$bus = bus
在這個例子中,我們定義了一個bus實例,并將其添加到Vue.prototype上。然后就可以在任意組件中使用$bus來觸發事件和監聽事件了。
總的來說,Vue中的通信是非常靈活和全面的,可以滿足組件之間各種不同的交互需求。