vue 的$emit看完这篇你就会用了
作者：
秒速五厘米
文章简介：
在vue中我们常常会用到组件嵌套，对于新手来说，父子组件通信会经常困扰我们，不懂还在网站找例子？看完这篇你就会用了。
在vue中我们常常会用到组件嵌套，对于新手来说，父子组件通信会经常困扰我们，不懂还在网站找例子？看完这篇你就会用了。
//父级
new Vue({
el:"#app",
data:{
aaa:111,
bbb:222
},
methods:{
dosometing:function(msg){
console.log(msg)
}
}
})
//组件：
Vue.component('child',{
props:['aaa'],
template:'<input type='text'>'
});
//调用子组件
<child @change="dosometing" :aaa='111' :bbb='222'></child>渲染出来的结果,没有被"props"接受的数据会直接绑到组件元素上
<input type="text" value="222">
但当在输入框输入的时候dosometing并未执行,说明绑定的change事件并没有绑上。如果用$emit
Vue.component('child',{
props:['aaa'],
template:"<input @click='childfun' type='text'>",
methods:{
childfun:function(){
this.$emit('change');//触发事件
}
}
});
//调用子组件
<child @change="doSomeTing" :aaa='111' :bbb='222'></child>好搞定，当我们在childfun方法内输出this.change的时候，结果为undefined，说明change方法并没有挂载在组件实例下边。$emit相当于jq中的trigger事件，只不过是用子组件来触发父组件的方法。所以里面的this是父组件。
不过为了触发父级的事件我们并不是只有$emit可以实现
1.可以通过$parent来直接触发父级的事件
Vue.component('child',{
props:['aaa'],
template:"<input @click='childfun' type='text'>",
methods:{
childfun:function(){
this.$parent.change1(1111)
};//触发父级事件
}
}
});这种方法可以和$emit达到相同的效果
2.通过props以参数的形式把方法传过来
//父级
new Vue({
el:"#app",
data:{
aaa:111,
bbb:222
},
methods:{
dosometing:function(msg){
console.log(msg)
}
}
})
//组件：
Vue.component('child',{
props:['aaa'],
template:'<input type='text'>',
childfun:function(){
this.change1(1111)
}
});
//调用子组件
<child :change="dosometing" :aaa='111' :bbb='222'></child>
当然这样是执行了想要执行的方法，但是因为方法挂载到了子组件上所以方法内的this指向的是子组件，这时可以用vm = new Vue({}) 用vm来代替this，达到操控父组件数据的目的。