潍坊市作风建设年网站,营销网站 app开发,网站建设 seo模块,局域网搭建目录
介绍
触发与监听事件
事件参数
声明触发的事件
事件校验
总结 介绍
Vue3是Vue框架的最新版本#xff0c;其中对组件事件进行了一些改进和优化。组件事件是Vue中一种常用的通信机制#xff0c;用于在组件之间传递数据或触发动作。
Vue3中的组件事件主要有两种类型…
目录
介绍
触发与监听事件
事件参数
声明触发的事件
事件校验
总结 介绍
Vue3是Vue框架的最新版本其中对组件事件进行了一些改进和优化。组件事件是Vue中一种常用的通信机制用于在组件之间传递数据或触发动作。
Vue3中的组件事件主要有两种类型自定义事件和原生DOM事件。自定义事件是由组件自身定义并触发的事件原生DOM事件是从DOM元素中触发的事件。
在Vue3中自定义事件的实现方式有所改变。在Vue2中我们使用$emit方法触发自定义事件而在Vue3中我们使用emits选项来声明组件所支持的自定义事件。通过在组件的模板中使用事件名称的方式我们可以监听并响应这些自定义事件。这种方式使代码更容易理解和维护。
另外Vue3还引入了一种新的组件事件机制即通过provide和inject来进行跨层级组件通信。通过在父组件中使用provide方法提供数据然后在子组件中使用inject方法来接收数据实现了更灵活的组件通信方式。这种方式可以解决组件之间多层级传递数据的问题。
对于原生DOM事件Vue3采用了更加直观的方式进行绑定。在Vue2中我们使用v-on或来绑定DOM事件而在Vue3中我们可以直接在组件标签上使用事件名称的方式来绑定DOM事件。这种方式减少了代码的冗余提高了开发效率。
触发与监听事件
在组件的模板表达式中可以直接使用 $emit 方法触发自定义事件 (例如在 v-on 的处理函数中)
!-- MyComponent --
button click$emit(someEvent)click me/button
父组件可以通过 v-on (缩写为 ) 来监听事件
MyComponent some-eventcallback /
同样组件的事件监听器也支持 .once 修饰符
MyComponent some-event.oncecallback /
像组件与 prop 一样事件的名字也提供了自动的格式转换。注意这里我们触发了一个以 camelCase 形式命名的事件但在父组件中可以使用 kebab-case 形式来监听。与 prop 大小写格式一样在模板中我们也推荐使用 kebab-case 形式来编写监听器。 和原生 DOM 事件不一样组件触发的事件没有冒泡机制。你只能监听直接子组件触发的事件。平级组件或是跨越多层嵌套的组件间通信应使用一个外部的事件总线或是使用一个全局状态管理方案。 事件参数
有时候我们会需要在触发事件时附带一个特定的值。举例来说我们想要 BlogPost 组件来管理文本会缩放得多大。在这个场景下我们可以给 $emit 提供一个额外的参数
button click$emit(increaseBy, 1)Increase by 1
/button
然后我们在父组件中监听事件我们可以先简单写一个内联的箭头函数作为监听器此函数会接收到事件附带的参数
MyButton increase-by(n) count n /
或者也可以用一个组件方法来作为事件处理函数
MyButton increase-byincreaseCount /
该方法也会接收到事件所传递的参数
function increaseCount(n) {count.value n
} 所有传入 $emit() 的额外参数都会被直接传向监听器。举例来说$emit(foo, 1, 2, 3) 触发后监听器函数将会收到这三个参数值。 声明触发的事件
组件可以显式地通过 defineEmits() 宏来声明它要触发的事件
script setup
defineEmits([inFocus, submit])
/script
我们在 template 中使用的 $emit 方法不能在组件的 script setup 部分中使用但 defineEmits() 会返回一个相同作用的函数供我们使用
script setup
const emit defineEmits([inFocus, submit])function buttonClick() {emit(submit)
}
/script
defineEmits() 宏不能在子函数中使用。如上所示它必须直接放置在 script setup 的顶级作用域下。
如果你显式地使用了 setup 函数而不是 script setup则事件需要通过 emits 选项来定义emit 函数也被暴露在 setup() 的上下文对象上
export default {emits: [inFocus, submit],setup(props, ctx) {ctx.emit(submit)}
}
与 setup() 上下文对象中的其他属性一样emit 可以安全地被解构
export default {emits: [inFocus, submit],setup(props, { emit }) {emit(submit)}
}
这个 emits 选项和 defineEmits() 宏还支持对象语法。通过 TypeScript 为参数指定类型它允许我们对触发事件的参数进行验证
script setup
const emit defineEmits({submit(payload: { email: string, password: string }) {// 通过返回值为 true 还是为 false 来判断// 验证是否通过}
})
/script
如果你正在搭配 TypeScript 使用 script setup也可以使用纯类型标注来声明触发的事件
script setup langts
const emit defineEmits{(e: change, id: number): void(e: update, value: string): void
}()
/script
TypeScript 用户请参考如何为组件所抛出事件标注类型
尽管事件声明是可选的我们还是推荐你完整地声明所有要触发的事件以此在代码中作为文档记录组件的用法。同时事件声明能让 Vue 更好地将事件和透传 attribute 作出区分从而避免一些由第三方代码触发的自定义 DOM 事件所导致的边界情况。 如果一个原生事件的名字 (例如 click) 被定义在 emits 选项中则监听器只会监听组件触发的 click 事件而不会再响应原生的 click 事件。 事件校验
和对 props 添加类型校验的方式类似所有触发的事件也可以使用对象形式来描述。
要为事件添加校验那么事件可以被赋值为一个函数接受的参数就是抛出事件时传入 emit 的内容返回一个布尔值来表明事件是否合法。
script setup
const emit defineEmits({// 没有校验click: null,// 校验 submit 事件submit: ({ email, password }) {if (email password) {return true} else {console.warn(Invalid submit event payload!)return false}}
})function submitForm(email, password) {emit(submit, { email, password })
}
/script
总结
总结来说Vue3对组件事件进行了一些改进和优化。通过使用emits选项声明自定义事件以及引入provide和inject进行跨层级组件通信使组件事件的使用更加方便和灵活。同时通过简化原生DOM事件的绑定方式提高了代码的可读性和可维护性。这些改进和优化使得Vue3的组件事件更加强大和易用。
