vue的事件绑定

Posted 2020-10-05 Miss Su

vue事件有两方面内容：DOM事件 和 自定义事件。

DOM事件
vue中采用DOM2级事件的处理方式，为IE9以上的浏览器服务。下面我们先来讲解一下什么是DOM2级事件吧！

JS中DOM0级事件有两种：标签内绑定事件 和 js中绑定事件；

没有DOM1级事件：因为1级DOM标准中没有定义与事件相关的内容；

DOM2级事件：只有一种监听方法 addEventListener(事件名，func，false冒泡阶段调用)/removeEventListener()。
DOM2级事件包含三个事件：事件捕获阶段、目标阶段、事件冒泡阶段。

vue绑定事件

1.通过指令 v-on：事件名=“函数名”绑定事件 eg:<button v-on:click="doThis"></button>
2.通过语法 @事件名=“函数名”绑定事件 eg:<button @click.stop="doThis"></button>

vue解绑事件

通过修饰符修饰事件后，vue再去解绑事件只是解绑了修饰之前的事件，所以解绑最终是失败的。
我们可以合理的运用委托事件来解决大部分事件绑定引起的性能问题。

vue自定义事件

vue自定义事件是为组件间的通信设计，有$on、$off、$once、$emit触发事件、$brodcast事件广播、$dispath派发事件几个API。

每个vue实例都有两个私有变量:vm._events存储所有自定义事件
vm._eventsCount存储事件广播后，子组件触发自定义事件的数量。

vm.$on(event,callback):监听当前实例上的自定义事件；
vm.$once(event,callback):监听当前实例上的一个自定义事件，触发后立即移除事件；
vm.$off(event,callback):移除当前实例上的自定义事件监听器；
vm.$emit(event,[...args]):触发当前实例上的自定义事件；

vue2.0中已经废弃$brodcast和$dispath事件，利用props+emit或者vuex代替。