Vue——任意组件间的通信

思路

核心方法

$emit()   触发事件

$on()     监听事件

核心思路

实例

HTML
<tim></tim>
<chen></chen>

JS

//第四步，定义一个调度器
var Event = new Vue();

//负责说
Vue.component('tim',{
template:`<div>
// 第一步，定义了一个keyup事件，触发on_change函数，绑定i_said变量
我说： <input @keyup="on_change" v-model="i_said">
</div>`,

methods: {
//第三步，定义on_change函数
on_change: function(){
//第五步，使用$emit，定义调度器触发事件
//  事件名称         参数
Event.$emit('tim-said-sth', this.i_said)
}
},

data: function (){
return {
//第二步，定义i_said默认为空
i_said: '',
}
}
});

//负责听
Vue.component('chen',{
template: `<div>
//第一步，在这里显示最终传过来的数据
tim说 {{tim_said}}
</div>  `,

data: function () {
return {
//第二步，默认数据为空
tim_said: '',
}
},
//初始化完毕后
mounted: function (){
// 第三步，让this执行这个组件，而不是调度器
var me = this;
//第四步，监听上面那个组件的事件，并且把上面的数据传入回调函数
Event.$on('tim-said-sth',function(data){
//第五步，绑定数据
me.tim_said = data;
})
}
});

new Vue({
el:'#app'
})