<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="root">
<child content="dell"></child>
<child content="Lee"></child>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
Vue.prototype.bus=new Vue();
Vue.component('child',{
props:{
content:String
},
data(){
return{
selfContent:this.content
}
},
template:'<div @click="handleClick">{{selfContent}}</div>',
methods:{
handleClick(){
this.bus.$emit('change',this.selfContent)
}
},
mounted(){
this.bus.$on('change',(msg)=>{
this.selfContent=msg;
})
}
})
var vm=new Vue({
el:"#root"
})
</script>
</body>
</html>
vue非父子組件傳參（bus/總線/發(fā)布訂閱者/觀察者模式）
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
- 文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事?！?“怎么了？”我有些...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上，一...
- 文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起，我...
- 正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜，卻給世界環(huán)境...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背。 一陣腳步聲響...
推薦閱讀更多精彩內(nèi)容
- 1.父組件傳遞數(shù)據(jù)給子組件 父組件數(shù)據(jù)如何傳遞給子組件呢？可以通過props屬性來實現(xiàn) 父組件： 子組件通過pro...
- 子元素觸發(fā)父元素事件四步走 子組件定義一個事件，或者寫在生命周期里面 子組件方法內(nèi)（生命周期內(nèi)），觸發(fā)父元素事件 ...
- 1.如何創(chuàng)建組件 1.新建一個組件，如：在goods文件夾下新建goodsList.vue 2.在main.js中...
