Vue 组件（二）子组件向父组件传递数据

子组件向父组件传递数据有一下两种方式：

1、自定义事件

子组件用”$emit()“来触发事件，父组件用”$on()“来监听子组件事件。父组件也可以直接在子组件的自定义标签上使用” v-on ” 来监听子组件触发的自定义事件。（因为” v-on “除了监听DOM事件外，还可以用于组件间的自定义事件。）

示例代码：

<div id="app">
            <p>{{total}}p>
            <my-component 
                @increace="getTotal"
                @reduce="getTotal">my-component>
div>

上面例子中，子组件有两个按钮，实现加1和减1的效果，在改变组件的 data:”counter” 后，通过 $emit()再把它传递给父组件，父组件通过 v-on:increace 和 v-on:reduce（示例中使用了语法糖）来监听。

运行效果：

2、使用 v-model 指令
示例代码：

<div id="app">
    <p>总数：{{total}}p>
    <my-component v-model="total">my-component>
div>

上面的示例仍然是点击按钮加1的效果，不过这次组件$emit()事件名是特殊的input ，在使用组件的父级，并没有在上使用 v-on:increace = "handle" 这样的监听器，而是直接使用了 v-model 绑定的一个 total。
这也可以称作一种语法糖，因为上例可以间接的用自定义事件来实现，如下：

<div id="app">
    <p>总数：{{total}}p>
    <my-component @input="handle">my-component>
div>

<script>
        Vue.component('my-component',{
               //.....省略组件代码
            });

        new Vue({
            el:'#app',
            data:{
                  total:0
                },
            methods:{
                  handle:function(counter){
                  this.total = counter;
                    }
                }
            })          
script>

运行结果和上例相同。

v-model 创建自定义表单输入控件，进行数据双向绑定。

示例如下：

<div id="app">
    <p>总数：{{total}}p>
    <my-component v-model="total">my-component>
    <button @click="handleReduce">-1button>
div>

运行结果：