今日完成

自定义事件

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！

我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：

使用 $on(eventName) 监听事件

使用 $emit(eventName) 触发事件

另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

以下实例中子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件。

<div id="app">

    <div id="counter-event-example">

      <p>{{ total }}</p>

      <button-counter v-on:increment="incrementTotal"></button-counter>

      <button-counter v-on:increment="incrementTotal"></button-counter>

    </div>

</div>

<script>

Vue.component('button-counter', {

  template: '<button v-on:click="incrementHandler">{{ counter }}</button>',

  data: function () {

    return {

      counter: 0

    }

  },

  methods: {

    incrementHandler: function () {

      this.counter += 1

      this.$emit('increment')

    }

  },

})

new Vue({

  el: '#counter-event-example',

  data: {

    total: 0

  },

  methods: {

    incrementTotal: function () {

      this.total += 1

    }

  }

})

</script>

在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰 v-on 。例如：

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

data 必须是一个函数

可以看到 button-counter 组件中的 data 不是一个对象，而是一个函数：

data: function () {

  return {

    count: 0

  }

}

这样的好处就是每个实例可以维护一份被返回对象的独立的拷贝，如果 data 是一个对象则会影响到其他实例，如下所示：

<div id="components-demo3" class="demo">

    <button-counter2></button-counter2>

    <button-counter2></button-counter2>

    <button-counter2></button-counter2>

</div>

<script>

var buttonCounter2Data = {

  count: 0

}

Vue.component('button-counter2', {

    /*

    data: function () {

        // data 选项是一个函数，组件不相互影响

        return {

            count: 0

        }

    },

    */

    data: function () {

        // data 选项是一个对象，会影响到其他实例

        return buttonCounter2Data

    },

    template: '<button v-on:click="count++">点击了 {{ count }} 次。</button>'

})

new Vue({ el: '#components-demo3' })

</script>