今天回顧一下vue元件中兄弟元件如何實現通訊
//在兄弟元件之間的通訊，可以採用關係鏈和ref鏈去使用，解決兄弟之間通訊問題。
//html布局
我是哥哥
打弟弟
我是弟弟
嗚嗚嗚嗚嗚嗚~~~
//js**
vue.component('big-brother', }})
vue.component('littel-brother', }})
new vue()
注意點:在vue元件中,元件都可以通過關係鏈(this.$parent.$children[1],可以理解成js dom節點,操作父節點,兄弟節點)
通過$ref也可以實現在父子元件通訊
//html布局
我是哥哥
打弟弟
我是弟弟
嗚嗚嗚嗚嗚~
//js**
var angel = new vue()
vue.component('big-brother', }})
vue.component('littel-brother',
},methods:
},mounted()
})new vue()
注意點:這個方法的思路是將兄弟元件的方法先繫結在乙個例項上,然後在在另乙個兄弟元件上觸發這個方法。
(可以這樣理解:你哥哥給你規定你英語考試不能低於80分,低了他就要打你。然後你的英語老師想打你,但是她
不能直接動手,所以她就通知了你的哥哥,觸發你哥哥要打你的事件,所以你挨打了。)
Vue兄弟元件通訊
vue兄弟元件通訊之借助 事件匯流排 其實要實現兄弟元件通訊，就算是通過父子元件通訊的方式也是可以達到的，如 子 父 子 在這裡呢，就不對這種方式進行贅述，下面給大家介紹 借助 事件匯流排。第一步 在 元件資料夾中，建立乙個js檔案，這裡將其命名為 bus,js 在裡面寫入如下 import vue...
vue元件兄弟間通訊
借助於乙個公共的vue的例項物件，不同的元件可以通過該物件完成事件的繫結和觸發 var bus newvue bus.emit bus.on 熊大想要發訊息給熊二 接收方 熊二 事件繫結 bus.on customevent function msg 傳送方 熊大 觸發事件 bus.emit cus...
vue元件兄弟間通訊
四 兄弟元件間通訊 event 借助於乙個公共的vue的例項物件，不同的元件可以通過該物件完成事件的繫結和觸發 var bus new vue bus.emit bus.on 熊大想要發訊息給熊二，接收方 熊二 事件繫結 bus.on customevent function msg 傳送方 熊大 ...