vue3-深入组件-事件

触发与监听事件

在组件的模板表达式中,可以直接使用 $emit 方法触发自定义事件。

定义与使用格式规范:

camelCase(小驼峰命名形式)比如:changeStatus

复制代码
<!-- MyComponent -->
<button @click="$emit('changeStatus')">click me</button>

在父组件中使用 kebab-case 形式使用

复制代码
<MyComponent @change-status="callback" />

同样,组件的事件监听器也支持 .once 修饰符:

复制代码
<MyComponent @some-event.once="callback" />

和原生 DOM 事件不一样,组件触发的事件没有冒泡机制。你只能监听直接子组件触发的事件。

平级组件或是跨越多层嵌套的组件间通信

  • 应使用一个外部的事件总线

  • 或是使用一个全局状态管理方案。

事件参数

有时候我们会需要在触发事件时附带一个特定的值。

定义一个子组件,传参数为 1

复制代码
<!-- MyButton -->
<button @click="$emit('addNum', 1)">
  Increase by 1
</button>

父组件使用内联的箭头函数监听

复制代码
<MyButton @add-num="(n) => count += n" />

父组件也可使用组件方法来作为事件处理函数:

复制代码
<MyButton @add-num="addNum" />

function addNum(n) {
  count.value += n
}

所有传入 $emit() 的额外参数都会被直接传向监听器。

声明触发的事件

组件可以显式地通过 defineEmits() 宏来声明它要触发的事件

复制代码
<script setup>
const emit = defineEmits(['inFocus', 'submit'])

function buttonClick() {
  emit('submit')
}
</script>

尽管事件声明是可选的,我们还是推荐你完整地声明所有要触发的事件,以此在代码中作为文档记录组件的用法。
如果一个原生事件的名字 (例如 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>
```
相关推荐
ai小鬼头14 分钟前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's21 分钟前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫1 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim1 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim1 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心1 小时前
vben 之 axios 封装
前端·javascript·学习
漫谈网络1 小时前
WebSocket 在前后端的完整使用流程
javascript·python·websocket
遗憾随她而去.1 小时前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
xjt_09012 小时前
浅析Web存储系统
前端
喜欢敲代码的程序员2 小时前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis