<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>非父子組件之間的傳值(bus/總線/發布訂閱模式/觀察者模式)</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<body>
<div id="app">
<child content='Dell'></child>
<child content='Lee'></child>
</div>
<script>
Vue.prototype.bus = new Vue();
Vue.component("child", {
data: function() {
return {
selfContent: this.content,
}
},
props: {
content: String
},
template: '<div @click="handleClick">{{selfContent}}</div>',
methods: {
handleClick: function() {
this.bus.$emit('change', this.selfContent);
// alert(this.content)
}
},
mounted: function() {
let this_ = this;
this.bus.$on('change', function(msg) {
// alert(msg)
this_.selfContent = msg;
})
}
});
var vm = new Vue({
el: '#app'
})
</script>
</body>
</html>
非父子組件之間的傳值(bus/總線/發布訂閱模式/觀察者模式)
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
- 文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
- 文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
推薦閱讀更多精彩內容
- 1.如何創建組件 1.新建一個組件，如：在goods文件夾下新建goodsList.vue 2.在main.js中...
