Vue中父组件使用prop向子组件传递数据,那么子组件向父组件使用什么方式传递信息:自定义事件。
1.先来看官网上面教程
每个 Vue 实例都实现了事件接口,即:
- 使用
$on(eventName)
监听事件 - 使用
$emit(eventName, optionalPayload)
触发事件
<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>
Vue.component('button-counter', {
template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
incrementCounter: function () {
this.counter += 1
this.$emit('increment')
}
},
}) new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
})
2.功能解释:
当子组件click出发一个效果,子组件事件(incrementTotal)命名为"increment"放入父组件中触发($emit('increment'))。
以下为个人理解:子组件的事件(incrementTotal)是独立不可共享的,使用事件绑定(v-on)给子组件事件包装一层可以被父组件接收的外衣,
实际上父组件还是要使用子组件事件(incrementTotal),当然其内部逻辑可自定义。
以上内容为个人学习所感,如有错误请指正,勿喷。