vue 的$emit看完这篇你就会用了

在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，达到操控父组件数据的目的。