vue 使用eventBus實(shí)現(xiàn)同級(jí)組件的通訊
新創(chuàng)建一個(gè)vue實(shí)例用于調(diào)度事件的綁定和發(fā)送
可以做到同級(jí)組件相互通訊,傳遞參數(shù),點(diǎn)擊第一個(gè)組件會(huì)修改第二個(gè)組件的label值,點(diǎn)擊第二個(gè)組件會(huì)修改第二個(gè)組件的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> // 使用一個(gè)vue實(shí)例 作為事件的載體,用于綁定事件和處理發(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) => { // 這個(gè)this 指的是one的vue實(shí)例 this.val = val } ) }, methods: { click() { // 如果one被點(diǎn)擊了,則發(fā)送一個(gè)one_click的事件,并傳遞一個(gè)參數(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>
總結(jié)
以上所述是小編給大家介紹的vue 使用eventBus實(shí)現(xiàn)同級(jí)組件的通訊,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
詳解Vue.js組件可復(fù)用性的混合(mixin)方式和自定義指令
本篇文章主要介紹了詳解Vue.js組件可復(fù)用性的混合(mixin)方式和自定義指令,具有一定的參考價(jià)值,有興趣的可以了解一下2017-09-09vue實(shí)現(xiàn)手機(jī)號(hào)碼的校驗(yàn)實(shí)例代碼(防抖函數(shù)的應(yīng)用場(chǎng)景)
這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)手機(jī)號(hào)碼的校驗(yàn)的相關(guān)資料,主要是防抖函數(shù)的應(yīng)用場(chǎng)景,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09關(guān)于vue中路由的跳轉(zhuǎn)和參數(shù)傳遞,參數(shù)獲取
這篇文章主要介紹了關(guān)于vue中路由的跳轉(zhuǎn)和參數(shù)傳遞,參數(shù)獲取方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03vuejs移動(dòng)端實(shí)現(xiàn)div拖拽移動(dòng)
這篇文章主要為大家詳細(xì)介紹了vuejs移動(dòng)端實(shí)現(xiàn)div拖拽移動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07vue elementUI 表單校驗(yàn)功能之?dāng)?shù)組多層嵌套
這篇文章主要介紹了vue elementUI 表單校驗(yàn)(數(shù)組多層嵌套)功能的實(shí)例代碼,代碼簡單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-06-06vue 中動(dòng)態(tài)綁定class 和 style的方法代碼詳解
這篇文章主要介紹了vue 中動(dòng)態(tài)綁定class 和 style的方法,通過實(shí)例結(jié)合的形式給大家接受的非常詳細(xì),需要的朋友參考下吧2018-06-06