组件事件

触发与监听事件

子组件中通过$emit触发自定义事件

<!-- MyComponent -->
<button @click="$emit('someEvent')">Click Me</button>

父组件中通过v-on监听子组件的自定义事件

<MyComponent @some-event="callback" />

同样也支持修饰符

<MyComponent @some-event.once="callback" />

事件的命名也提供了自动的格式转换,以 camelCase 形式命名的事件，但在父组件中可以使用 kebab-case 形式来监听。 推荐使用 kebab-case 形式来编写监听器。

TIP
组件触发的事件没有冒泡机制,你只能监听直接子组件的触发事件,平级或跨级组件间的通信应该使用一个外部的事件总线或全局状态管理方案

事件参数

$emit提供额外的参数(可以是多个)来向暴露的方法传递数据

<!--子组件-->
<button @click="$emit('increaseBy', 1)">Increase by 1</button>

<!--父组件-->
<MyButton @increase-by="(n) => count += n" />

声明触发的事件

组件可以铜鼓哦defineEmits宏来声明他要触发的事件

<script setup>
defineEmits(['inFocus', 'submit'])
</script>

export default {
  emits: ['inFocus', 'submit'],
  setup(props, ctx) {
    ctx.emit('submit')
  },
}
// 结构使用
export default {
    emits: ['inFocus', 'submit'],
    setup(props, { emit }) {
        emit('submit')
    }
}

上面例子中内联表达式使用的$emit不能在<script setup>使用,但defineEmits()会返回一个作用相同的函数供我们使用

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

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

defineEmits()宏只能放置在<script setup>或者<script>的顶层的setup函数中

事件校验

defineEmits宏可以接受一个对象作为参数,用于校验传递给事件处理器的参数,要为事件添加校验,事件可以被赋值为一个函数,接受的参数就是抛出事件时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>