由于剛?cè)雟ue不久,并且經(jīng)驗(yàn)較淺楚昭。所以在使用官方介紹的bus總線的時(shí)候出現(xiàn)了一些很簡(jiǎn)單的低級(jí)的疑惑。
我的需求是
通過(guò)一個(gè)組件的id塘幅,來(lái)獲取下面和他id相同組件的內(nèi)容
(上圖是官方的說(shuō)法)
我的疑惑是:按照官方說(shuō)的电媳,在不使用vuex的情況下庆亡,使用一個(gè)全局變量來(lái)發(fā)射和接受需要交互的數(shù)據(jù)。
那么這個(gè)bus應(yīng)該怎么寫(xiě)呢拼缝?這個(gè)問(wèn)題也困惑了我很久彰亥,官方也沒(méi)有找到更加詳細(xì)的說(shuō)法(也可能是我沒(méi)有找到吧)
經(jīng)過(guò)一個(gè)前輩H的指導(dǎo),我終于正確的寫(xiě)了出來(lái)继阻。
直接上代碼:
先建立一個(gè)單獨(dú)的bus的文件仁卷,保存在組建之外。
importVuefrom'vue'
constbus=newVue()
export defaultbu
然后在需要的組建里面按照正確的路勁來(lái)import就好了锦积。
例如這樣:
在需要傳出去data的組建里丰介,先import bus from 'yourpath',然后開(kāi)始使用bus傳數(shù)據(jù)哮幢。
bus.$emit('typeId',label.id)
在需要接收的組建里橙垢,先import bus from 'yourpath',然后使用bus接受。
let_this=this
bus.$on('typeId',function(value) {
_this.proper=_this.property.filter(v=>v.functionTypeId ===value) //這里是我的需求代碼嗽元,你可以寫(xiě)上你自己的
})
值得注意的是這里的this喂击,bus函數(shù)里面的this不再是vm的this,所以如果你要在bus里面操作vm的內(nèi)容的話佩谷,需要在bus之外先存一下vm的this谐檀。然后才能正確使用裁奇。
就是這樣,以上です课幕。毎日少しずつ進(jìn)んでください五垮。
by the way 感謝@Helen幫我理清楚頭緒放仗。非常感謝!