vue基礎之事件匯流排bus（非父子元件傳值通訊）

事件匯流排其實就是一種非父子關係的通訊方式

（1）給vue的原型上掛載乙個vue例項

vue.prototype.bus =

newvue
()

（2）傳送事件，傳送資料

this.bus.$emit

('事件名', 資料)

（3）監聽事件，獲取資料

this.bus.$on

('事件名', (資料)
=>
)

<

!doctype html>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
"">
<
/script>
#root 
<
/style>
<
/head>
"root"
>
<
/child-one>
<
/child-two>
<
/div>
//給vue的原型上掛載乙個vue例項
vue.prototype.bus =
newvue()
vue.
component
('child-one',}
,            methods:},
mounted()
)}})
vue.
component
('child-two',}
,            methods:},
mounted()
)}})
var vm =
newvue(,
})<
/script>
<
/body>
<
/html>

Vue中的事件匯流排 bus

在vue中，我們父子之間通訊簡單明瞭 父元件向子元件傳值 props，在父元件中，用 要傳遞過去的名字 要傳遞的值 在子元件中 使用props 接受即可 子元件向父元件傳值 emit.通過自定義方法，在子元件中，我們使用this.emit 方法名 引數 向父元件傳值 在父元件中，我們使用子元件傳遞過...

Vue系列狀態管理篇 Bus事件匯流排篇

原理 建立乙個空的vue例項，來作為互動的中介 新建乙個資料夾bus，在資料夾中新建乙個檔案 bus.js 也可以不要 在檔案 bus.js 建立以下 import vue from vue const bus new vue export default bus 3.在 main.js 匯入 bu...

vue腳手架開發 事件匯流排 bus的妙用

在做上乙個專案中，遇到過這樣乙個問題 後端給的介面的資料中有公共資料，為了避免多次請求，前端避免不了的需要做資料儲存，而且如果是多次請求相同資料，前端頁面的效能也將大打折扣。為了解決這個問題，我 教了我一手，用 bus來儲存資料，把它當成是全域性的資料，然後就可以非常方便地拿到對應的值 在我的認知的...