持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情

前言

在我们在子组件中进行事件派发的时候，除了可以自定义事件以外，还可以进行数据传递，这在实际开发中将会非常有用。并且今天也会告诉大家一个之前章节中，没有提到的事件派发形式，用于在<script setup>中使用。

派发事件传参

之前我们介绍过，在模板中派发事件的可以的话，可以使用内置$emit的方法，但是在<script setup>中$emit是无法使用的。但是我们就可以通过 defineEmits()方法返回的函数就行事件的派发：

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

function fontSub() {
  emit('fontChange')
}
</script>

通过如上的方法的，我们就可以很方便的在 <script setup> 中 进行事件的派发了。

当然，如果我们想要在事件派发的过程中传递数据的话，也是很方便的。

只需要在defineEmits方法返回的函数的第二个参数，传递相应的数据就可以了。如下:

import { ref } from 'vue'
const fs = ref(1)

function fontSub() {
  emit('fontChange', fs)
}
</script>

然后在父组件进行相应事件的监听就可以了：

<Content @fontChange="(n) => fs += n" />

还有一点是，defineEmits方法除了可以传递数组外，还可以传递对象的，并能对自定义事件传递的参数进行相应的校验。

<script setup>
const emit = defineEmits({
  submit(payload) {
    // 可以通过接受的值进行相应的逻辑判断
    // 对数据进行校验
  }
})
</script>

一眨眼的时间，国庆的假期已接近尾声，似乎感觉还没开始的国庆，已经结束了，明天就要开始搬砖的日子，即使内心里有一百个不情愿，但拿人钱财替人消灾，为了自己有个更好的未来，加油吧。

最后，在这国庆的最后一天里，祝大家做个好梦，迎接更美好的一天。