我们知道, 父组件使用 prop 传递数据给子组件. 但子组件怎么跟父组件通信呢? 这个时候 vue 的自定义事件系统就派得上用场了.
使用 v-on 绑定自定义事件 https://cn.vuejs.org/v2/guide/components.html#使用-v-on-绑定自定义事件
每个 Vue 实例都实现了事件接口 https://cn.vuejs.org/v2/api/#实例方法-事件 , 即:
使用 $on(eventName) 监听事件
使用
$emit(eventName, optionalPayload)
触发事件
Vue 的事件系统与浏览器的 EventTarget API https://developer.mozilla.org/en-US/docs/web/API/EventTarget 有所不同. 尽管它们运行起来类似, 但是 $on 和 $emit 并不是 addEventListener 和 dispatchEvent 的别名.
另外, 父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件.
不能用 $on 监听子组件释放的事件, 而必须在模板里直接用 v-on 绑定, 参见下面的例子.
下面是一个例子:
- {{ total }}
- Vue.component('button-counter', {
- template: '{{ counter }}',
- 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
- }
- }
- })
- 0
- 0 0
来源: http://www.bubuko.com/infodetail-2563305.html