Vue:v-on自定义事件

  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),当然其内部逻辑可自定义。

以上内容为个人学习所感,如有错误请指正,勿喷。
上一篇:MongoDB的C#官方驱动InvalidOperationException异常的解决办法


下一篇:springmvc 多数据源 SSM java redis