Vue自定义事件

事件绑定

每个 Vue 实例都实现了事件接口 (Events interface)

使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件

WARNING

[注意]Vue 的事件系统分离自浏览器的EventTarget API。尽管它们的运行类似，但是 $on 和 $emit 不是addEventListener 和 dispatchEvent 的别名

[注意]不能用 $on 侦听子组件抛出的事件，而必须在模板里直接用 v-on 绑定

<!-- 父组件 -->
<Child @increment="incrementCounter"></Child>

data(){
    count:0
},
methods:{
    incrementCounter(){
        this.count++;
    }
}

<button @click="handleIncrement"> +1 </button>
methods:{
    handleIncrement(){
        this.$emit('increment')
    }
}

命名约定

自定义事件实质上也是属于HTML的属性，所以其在HTML模板中，最好使用中划线形式。

<child @pass-data="getData"></child>

而子组件中触发事件时，同样使用中划线形式

this.$emit('pass-data')

数据传递

子组件通过 $emit 可以触发事件，第一个参数为要触发的事件，第二个事件为要传递的数据。

this.$emit('pass-data',this.childMsg)

父组件通过$on监听事件，事件处理函数的参数则为接收的数据。

getData(val){
    this.msg = val
}

.sync 修饰符

2.0 中移除 .sync 的理由

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件两侧都没有明显的变更来源。

2.3.0+ 重新引入了 .sync 修饰符

但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 侦听器

<comp :foo.sync="bar"></comp>

<!-- 扩展为 -->

<comp :foo="bar" @update:foo="val => bar = val"></comp>

当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：

this.$emit('update:foo', newValue)

TIP

因此，可以使用 .sync 来简化自定义事件的操作，实现子组件向父组件的数据传递。