四、兄弟元件間通訊（event）
借助於乙個公共的vue的例項物件，不同的元件可以通過該物件完成事件的繫結和觸發
var bus = new vue();
bus.$emit()
bus.$on()
熊大想要發訊息給熊二，
接收方（熊二）：事件繫結
bus.$on('customevent',function(msg))
傳送方（熊大）：觸發事件
bus.$emit('customevent',123);
接收方：事件繫結
傳送方：觸發事件
doctype html
>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>
title
>
<
script
src="js/vue.js"
>
script
>
head
>
<
body
>
<
div
id="container"
>
<
p>}
p>
<
xiongda
>
xiongda
>
<
hr>
<
xionger
>
xionger
>
div>
<
script
>
/*借助於乙個公共的vue的例項物件，不同的元件可以通過該物件完成事件的繫結和觸發
*///
new乙個物件，兄弟間的通訊，將借助他事件繫結和觸發來實現
varbus
=new
vue();
//熊大傳送訊息給熊二
//xiongda元件
vue.component(
"xiongda",
},template:`
<
div>
<
h1>
我是熊大
<
/h1>
<
button @click="
sendtoxionger
">
click me
<
/button>
<
/div>
` })
//熊二元件
vue.component(
"xionger",)}})
newvue(
})script
>
body
>
html
>
改版：熊大在input輸入資料傳遞給熊二
doctype html
>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>
title
>
<
script
src="js/vue.js"
>
script
>
head
>
<
body
>
<
div
id="container"
>
<
p>}
p>
<
xiongda
>
xiongda
>
<
hr>
<
xionger
>
xionger
>
div>
<
script
>
/*借助於乙個公共的vue的例項物件，不同的元件可以通過該物件完成事件的繫結和觸發
*///
new乙個物件，兄弟間的通訊，將借助他事件繫結和觸發來實現
varbus
=new
vue();
//熊大傳送訊息給熊二
//xiongda元件
vue.component(
"xiongda",
},methods:
},template:`
<
div>
<
h1>
我是熊大
<
/h1>
<
input type="
text"v
-model="
xiongdainput
"/>
<
button @click="
sendtoxionger
">
click me
<
/button>
<
/div>
` })
//熊二元件
vue.component(
"xionger",
},template:`
<
div>
<
h1>
我是熊二
<
/h1>
<
p v-
for=
"tmp in recvmsgis
">
}<
/p>
<
/div>
`, mounted:
function
()) }
})newvue(
})script
>
body
>
html
>
vue元件兄弟間通訊
借助於乙個公共的vue的例項物件，不同的元件可以通過該物件完成事件的繫結和觸發 var bus newvue bus.emit bus.on 熊大想要發訊息給熊二 接收方 熊二 事件繫結 bus.on customevent function msg 傳送方 熊大 觸發事件 bus.emit cus...
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 在另個...