Vue框架在前端界有著相當高的地位,其中組件開發是Vue的重要特性。作為組件化開發的核心,Vue提供了不同組件間通信的方式,其中之一就是兄弟組件之間的通信。
兄弟組件間通信指的是同一個父組件下的兩個不相鄰組件之間的傳值操作。這種情況下,兩個組件可以通過父組件來傳遞數據或方法。
Vue.component('component-a', { template: '{{ message }}', data: function() { return { message: '' }; }, mounted: function() { this.$root.$on('message', function(data) { this.message = data; }) } }); Vue.component('component-b', { template: '', methods: { sendMessage: function() { var message = 'Sending message from Component B'; this.$root.$emit('message', message); } } });
在這個例子中,我們有兩個組件component-a和component-b,它們在同一個父級組件下。
new Vue({ el: '#app', data: { message: '' } });
我們簡單地實例化了Vue,這里我們給Vue一個id叫做app的div,然后配置了一個message屬性,這個屬性將用于存儲我們要傳遞的信息。
component-a組件通過監聽事件的方式獲取了來自component-b的信息,并且使用了組件的data保存傳遞過來的信息。
而component-b則是通過emit事件將信息傳遞給Vue實例,并將這個事件綁定在組件中需要進行傳遞信息的句柄上,該組件內把一段信息賦值給變量,以便傳遞出去。
這樣就完成了兄弟之間的信息傳遞,可以在前端界面上看到這段信息的變化。這種傳遞方式在兄弟組件間較為常用,雖然有時會有傳遞深度限制,但我們可以通過使用事件總線等其他方式,在設計時避免這個限制。