vue元件兄弟間通訊

2021-09-24 18:28:12 字數 1381 閱讀 6731

借助於乙個公共的vue的例項物件,不同的元件可以通過該物件完成事件的繫結和觸發

var bus =

newvue()

;bus.

$emit()

bus.

$on(

)

熊大想要發訊息給熊二

接收方(熊二):事件繫結

bus.

$on(

'customevent'

,function

(msg)

)

傳送方(熊大):觸發事件

bus.

$emit

('customevent'

,123

);

>

>

charset

="utf-8"

>

>

title

>

src=

"js/vue.js"

>

script

>

head

>

>

"container"

>

>

}p>

>

xiongda

>

>

>

xionger

>

div>

>

/*借助於乙個公共的vue的例項物件,不同的元件可以通過該物件完成事件的繫結和觸發*/

//new乙個物件,兄弟間的通訊,將借助他事件繫結和觸發來實現

var bus =

newvue()

;//熊大傳送訊息給熊二

//xiongda元件

vue.

component

("xiongda",}

, methods:},

template:

`

click me`}

)//熊二元件

vue.

component

("xionger",}

, template:

`

} `

, mounted:

function()

)}})

newvue(}

)script

>

body

>

html

>

vue元件兄弟間通訊

四 兄弟元件間通訊 event 借助於乙個公共的vue的例項物件,不同的元件可以通過該物件完成事件的繫結和觸發 var bus new vue bus.emit bus.on 熊大想要發訊息給熊二,接收方 熊二 事件繫結 bus.on customevent function msg 傳送方 熊大 ...

Vue兄弟元件通訊

vue兄弟元件通訊之借助 事件匯流排 其實要實現兄弟元件通訊,就算是通過父子元件通訊的方式也是可以達到的,如 子 父 子 在這裡呢,就不對這種方式進行贅述,下面給大家介紹 借助 事件匯流排。第一步 在 元件資料夾中,建立乙個js檔案,這裡將其命名為 bus,js 在裡面寫入如下 import vue...

vue的 on 和 emit 兄弟元件間通訊

建立乙個檔案bus.js 在裡面new 乙個vue例項 import vue from vue export var bus new vue 在元件中分別引入,建立的檔案vue例項 import from bus.js 在其中乙個元件中進行傳送 bus.emit steps1tosteps2 在另個...