父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！
我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：
- 使用
$on(eventName)监听事件 - 使用
$emit(eventName)触发事件
另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
以下实例中子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件。
实例
代码语言：javascript复制<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 。例如：
代码语言：javascript复制<my-component v-on:click.native="doTheThing"></my-component>data 必须是一个函数
上面例子中，可以看到 button-counter 组件中的 data 不是一个对象，而是一个函数：
代码语言：javascript复制data: function () {
return {
count: 0
}
}这样的好处就是每个实例可以维护一份被返回对象的独立的拷贝，如果 data 是一个对象则会影响到其他实例，如下所示：
代码语言：javascript复制<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>
