好资源导航 » 文章资讯 » Vue自定义事件(详解)

Vue自定义事件(详解)

2023-09-26 05:17:05 69

前面的话

父组件使用props传递数据给子组件，子组件怎么跟父组件通信呢？这时，Vue的自定义事件就派上用场了。本文将详细介绍Vue自定义事件

事件绑定

每个Vue实例都实现了事件接口(Eventsinterface)，即

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

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

另外，父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件

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

命名约定

自定义事件的命名约定与组件注册及props的命名约定都不相同，由于自定义事件实质上也是属于HTML的属性，所以其在HTML模板中，最好使用中划线形式

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

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

数据传递

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

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

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

getData(value){
this.msg=value;
}

sync修饰符

在一些情况下，可能会需要对一个prop进行双向绑定。事实上，这正是Vue1.x中的.sync修饰符所提供的功能。当一个子组件改变了一个prop的值时，这个变化也会同步到父组件中所绑定的值。这很方便，但也会导致问题，因为它破坏了单向数据流的假设。由于子组件改变prop的代码和普通的状态改动代码毫无区别，当光看子组件的代码时，完全不知道它何时悄悄地改变了父组件的状态。这在debug复杂结构的应用时会带来很高的维护成本，上面所说的正是在2.0中移除.sync的理由

从2.3.0起重新引入了.sync修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的v-on侦听器

会被扩展为：

bar=val">

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

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

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

以上这篇Vue自定义事件(详解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

Vue自定义事件(详解)

热门推荐

随机推荐