持续创作,加速成长!这是我参与「掘金日新计划 · 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>
一眨眼的时间,国庆的假期已接近尾声,似乎感觉还没开始的国庆,已经结束了,明天就要开始搬砖的日子,即使内心里有一百个不情愿,但拿人钱财替人消灾,为了自己有个更好的未来,加油吧。
最后,在这国庆的最后一天里,祝大家做个好梦,迎接更美好的一天。