在 Vue 3 中如何优雅地检查已传递的 Emit

2024-03-19 12:30:41

Vue 3 中优雅地检查已传递的 Emit

问题

在 Vue 3 中，当使用 Composition API 时，有时我们需要检查某个 emit 是否已传递给组件。例如，如果组件 A 监听某个事件，但在组件 B 中该事件可能未传递。如何仅在传递该事件时触发它？

解决方案

为了优雅地检查已传递的 emit，我们可以利用 Vue 3 的 defineEmits 功能。defineEmits 允许我们声明组件中可用的 emits。然后，我们可以使用它来检查 emit 是否存在。

考虑以下代码示例：

<script setup>
const emit = defineEmits(['onBeforeAdd'])

const action = () => {
  // 检查 emit 是否存在
  if (emit('onBeforeAdd')) {
    emit('onBeforeAdd')
  }
}
</script>

在这里，我们使用 defineEmits 定义了一个名为 onBeforeAdd 的 emit。在 action 函数中，我们使用 emit('onBeforeAdd') 来检查该 emit 是否存在。如果存在，我们触发该 emit。

优势

使用此方法的主要优势是，它允许我们在不传递不必要的 prop 的情况下检查 emit。以前的方法可能需要传递一个额外的 shouldEmit prop 来控制是否触发 emit。然而，使用 defineEmits，我们可以避免此问题，从而使代码更加简洁。

真实世界示例

让我们考虑一个产品卡片组件，它监听 onBeforeAdd 事件，在将产品添加到购物车之前打开一个模态框。然而，在某些情况下，模态框可能已经打开，因此不需要再次打开它。使用 defineEmits，我们可以仅在模态框未打开时触发 onBeforeAdd 事件。

const handleAddToCart = () => {
  // 检查 emit 是否存在
  if (emit('onBeforeAdd')) {
    emit('onBeforeAdd')
    return
  }

  // 添加到购物车
  cartStore.addToCart(props.product)
}