首先須要在任意地方添加一個bus.js;javascript
在bus.js裏面 寫入下面信息vue
import Vue from 'vue' export default new Vue;
在須要通訊的組件都引入Bus.js java
若是你的bus.js是自定義一個bus的文件那from後面就改爲你的所放的位置函數
import Bus from './bus.js'
接下來就是要組件通訊了this
添加一個 觸發 #emit的事件按鈕router
<template> <div id="emit"> <button @click="bus">按鈕</button> </div> </template> import Bus from './bus.js' export default { data() { return { message: ''" } }, methods: { bus () { Bus.$emit('msg', '我要傳給兄弟組件們,你收到沒有') } } }
打開要和$emit通訊的另一個組件 blog
在鉤子函數中監聽msg事件事件
<template> <div id="on"> <p>{{message}}</p> </div> </template> import Bus from './bus.js' export default { data() { return { href: 'www.dddddd//d/d/d' } }, mounted() { $("body").on("click",".router_itme",function(){
//發送方
}) } }
打開要和$emit通訊的另一個組件 ,在鉤子函數中監聽msg事件ip
<template> <div id="on"> <p>{{message}}</p> </div> </template> import Bus from './bus.js' export default { data() { return { href : '' } }, mounted(){ // this.href = location.href.split('#')[1] // 接收傳header組件傳過來的路徑 let self = this; Bus.$on('hrefs', (e) => { self.href = e.split('#')[1] }) } }