组件事件

触发与监听事件

子组件上抛

1 2	<!-- MyComponent --> <button @click="$emit('someEvent')">click me</button>

父组件监听

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

事件参数

给 $emit 提供一个额外的参数：

1
2
3

<button @click="$emit('increaseBy', 1)">
  Increase by 1
</button>

父组件

1	<MyButton @increase-by="(n) => count += n" />

声明触发的事件

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

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

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

事件校验

要为事件添加校验，那么事件可以被赋值为一个函数，接受的参数就是抛出事件时传入 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>