vue 使用eventBus實現(xiàn)同級組件的通訊
新創(chuàng)建一個vue實例用于調(diào)度事件的綁定和發(fā)送
可以做到同級組件相互通訊,傳遞參數(shù),點擊第一個組件會修改第二個組件的label值,點擊第二個組件會修改第二個組件的label值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="vue.js"></script> </head> <body> <div id="app"> <one></one> <two></two> </div> </body> <script> // 使用一個vue實例 作為事件的載體,用于綁定事件和處理發(fā)送事件,作為調(diào)度中心 let eventBus = new Vue() let one = { template: '<div>{{val}} <button @click="click">click</button></div>', data() { return { val: 0 } }, created() { //為one綁定事件,如果two_click事件發(fā)生了,則執(zhí)行回調(diào)函數(shù) eventBus.$on('two_click', (val) => { // 這個this 指的是one的vue實例 this.val = val } ) }, methods: { click() { // 如果one被點擊了,則發(fā)送一個one_click的事件,并傳遞一個參數(shù) eventBus.$emit('one_click', 11) } } } let two = { template: '<div>{{val}} <button @click="click">click</button></div>', data() { return { val: 0 } }, created() { eventBus.$on('one_click', (val) => { this.val = val }) }, methods: { click() { eventBus.$emit('two_click', 22) } } } new Vue({ el: '#app', components: { one, two } }) </script> </html>
總結
以上所述是小編給大家介紹的vue 使用eventBus實現(xiàn)同級組件的通訊,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
詳解Vue.js組件可復用性的混合(mixin)方式和自定義指令
本篇文章主要介紹了詳解Vue.js組件可復用性的混合(mixin)方式和自定義指令,具有一定的參考價值,有興趣的可以了解一下2017-09-09vue實現(xiàn)手機號碼的校驗實例代碼(防抖函數(shù)的應用場景)
這篇文章主要給大家介紹了關于vue實現(xiàn)手機號碼的校驗的相關資料,主要是防抖函數(shù)的應用場景,文中通過示例代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧2019-09-09關于vue中路由的跳轉和參數(shù)傳遞,參數(shù)獲取
這篇文章主要介紹了關于vue中路由的跳轉和參數(shù)傳遞,參數(shù)獲取方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-03-03vue elementUI 表單校驗功能之數(shù)組多層嵌套
這篇文章主要介紹了vue elementUI 表單校驗(數(shù)組多層嵌套)功能的實例代碼,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-06-06vue 中動態(tài)綁定class 和 style的方法代碼詳解
這篇文章主要介紹了vue 中動態(tài)綁定class 和 style的方法,通過實例結合的形式給大家接受的非常詳細,需要的朋友參考下吧2018-06-06