Vue 元件通訊之EvemtBus

2021-08-08 21:50:24 字數 815 閱讀 3464

定義乙個排程器,其實就是new乙個vue。

讓這個排程器承載事件,也就是使用上面的兩個方法。

$emit()   觸發事件

$on() 監聽事件

第一步,專案目錄新建乙個bus.js

import vue from

'vue'

const bus =

newvue()

export

default bus

第二步,main.js裡往vue例項注入bus

// 引入bus

import bus from

'./bus'

// bus注入到vue例項

vue.prototype.$bus = bus

第三步,元件一繫結事件

>

@click

="sendmsg"

>

點我button

>

template

>

>

export

default}}

script

>

第四步,元件二監聽事件

>

>

}p>

template

>

>

export

default},

mounted()

)}}script

>

vue之元件通訊

vue元件通訊一般分為以下幾種情況 1 父子元件通訊 2 兄弟元件通訊 3 跨多層級元件通訊 一 父子通訊 父元件通過props傳遞資料給子元件,子元件通過emit傳送事件傳遞資料給父元件。父元件和子元件通訊 父元件如下 template div class parent div id child ...

VUE之元件間通訊

1.1 父元件向子元件傳值 父元件中 父元件 cityid cityid children template export default script 子元件 子元件 div template export default script 1.2 子元件向父元件傳值 父元件 父元件 cityid c...

vue元件通訊之provide inject

什麼是 provide inject 傳送門 vue的元件通訊方式我們熟知的有 props emit bus vuex 另外就是 provide inject provide inject 是 vue.js 2.2.0 版本後新增的 api,在文件中這樣介紹 這對選項需要一起使用,以允許乙個祖先元件...