1、前戲吧
看圖 看圖 看圖Ｓ舶啊；哿觥戴已！
大概原理.png
個(gè)人理解：
這明顯是生活中弟弟打電話給哥哥一樣，雙方都需要手機(jī)锅减，需要信號(hào)發(fā)射塔糖儡。
- 弟弟 => A組件
- 哥哥 => B組件
- 弟弟的手機(jī) => $emit發(fā)送數(shù)據(jù)
- 哥哥的手機(jī) => $on監(jiān)聽并接收數(shù)據(jù)
- 信號(hào)發(fā)射塔 => 中間事件線
- App.vue => 不用說都知道是地球
2、 代碼
2.1怔匣、在src/asstes下新建中間事件線ligature.js （注意后綴.js）
import Vue from 'Vue'
export default new Vue;
2.2握联、 在src/components新建A.vue
<template>
<div>
<h2>A組件</h2>
<button v-on:click="spot">點(diǎn)一下就傳</button>
</div>
</template>
<script>
import bus from '../assets/ligature';
export default {
methods: {
spot: function() {
//監(jiān)聽A組件中的spot，并發(fā)送數(shù)據(jù)
bus.$emit("spot", ' 沒想到吧Ｃ柯鳌金闽！我是A組件')
}
}
}
</script>
2.3、在src/components新建B.vue
<template>
<div>
<h2>B組件</h2>
<p>結(jié)果:{{msg}}</p>
</div>
</template>
<script>
import bus from "../assets/ligature";
export default {
data() {
return {
msg: "這TMD是默認(rèn)值除非你點(diǎn)一下上面的按鈕"
};
},
mounted() {
var _this = this;
//監(jiān)聽A組件中的spot剿骨，并接受數(shù)據(jù)
bus.$on("spot", function(msg) {
_this.msg = msg;
});
}
};
</script>
<style>
p{
font-size: 20px;
color: darkcyan;
}
</style>
2.4代芜、 修改App.vue (地球),注冊(cè)這兩個(gè)組件，并添加這兩個(gè)組件的標(biāo)簽
<template>
<div id="app">
<A/>
<hr>
<B/>
</div>
</template>
<script>
import A from './components/A'
import B from './components/B'
export default {
name: 'App',
components: {
A,
B
}
}
</script>
3懦砂、效果
效果圖.gif
