Vuejs之路之--子父之间的通信

父传子是单向的，子会因父的改变而改变，但父并不会因子的改变而改变。这是由于Vue.js怕父的数据会被使用者在不知情的情况下改变。

但是，子还是可以绕一个圈，把自己的数据传给父。

途径：自定义事件。

在解释子数据传给父之前，必须先要对事件有一个了解。

所谓事件，就是触发JS代码的“动作”，比如，点击（click）， 
输入（input）等等。 
Vue.js 使用v-on来监听事件，事件名被加在v-on 的后面，以这样的形式表示：v-on:click = "doFn" ，后面的doFn是事件触发的方法。

---

准备好了，开始传递数据吧。 
首先，先定义一个组件：

//js
Vue.component('my-button',{
    template:'<button v-on:click="childCount">{{counter}},</button>'
    data:function(){ //组件的data只能是以函数的形式存在
        return{
            counter:0
        }
    },
    methods:{
        childCount:function(){
            this.counter = this.counter+1;
            var value =  this.counter;
            this.$emit('shijian',value); //value就是子要传的数据
        }
    }
})
var app4 = new Vue({
    el:'#app4',
    data:{
        total:0
    },
    methods:{
        faterCount:function(value){ //value就是父组件从子组件拿到的数据
            this.total = this.total+value
        }
    }
})
   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

//html
<div id="app4">
<p>{{total}}</p>
    <my-button v-on:shijian="faterCount"></my-button>
</div>
   
   
1
2
3
4
5

这样，就完成了一次子数据传给父。

过程是这样的： 
子组件<button> 被点击了，于是触发了click事件所指向的childCount方法。

该方法有两个行为，一个是自增，另一个使用了$emit创建一个自定义事件shijian 并且传了一个参数value，这个事件和参数可以被父组件拿到。

于是我们看到了v-on:shijian="faterCount" 这行代码，其中，faterCount 是Vue的实例app4的方法，他的作用是让一个变量自增。同时，自定义事件shijian 带有一个来自子组件的参数，这个参数可以传给app4的任意方法。

我们可以看到，点击了一次<my-button> (实际上是点击了他里面的子组件button), 自定义事件就会被父捕获，从而触发指向的父的方法。

根本思路是：子抛出了一个自定义事件，并传参，让父捕获，从而执行自己的带有来自子参数的方法。

好处是：子组件和父组件解耦了。子组件只需要抛出一个事件，然后完成自己的逻辑就好，无须关心父组件的行为。

当然，你也可以不使用自定义事件，转而使用原生的事件，比如这里是click 这也是没问题的，但是要添加相应的后缀.native,代码如下所示：

<my-component v-on:click.native="doTheThing"></my-component>

从上面可以看出，是给父组件加的原生事件。

明白了：
子和父亲之间的通信是通过自定义事件来通信的，主要的过程是在子组件上绑定一个事件，比如说是v-on：click = "在组建内部定义的函数名"，我们要通过这个函数来"抛出"一个事件（能够被父组件监听），
$emit('shijian',value);在这里shijian就是事件名类似于click，input之类的，value是来源于子组件中的数据，父亲能够捡到这个事件从而触发绑定在父组件上的函数（至于干啥，跟子组件无关）；也就实现了所谓的"解耦"---子组件只管抛出一个事件，而不管父组件通过这个事件干了什么，父组件也不管是那个子组件抛出的，只管用就是了

顶