写点什么

Vue 组件入门(六)派发事件的参数传递

作者:Augus
  • 2022-10-15
    天津
  • 本文字数:690 字

    阅读完需:约 1 分钟

前言

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


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


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

发布于: 刚刚阅读数: 3
用户头像

Augus

关注

爱瞎搞的软件开发工程师 2021-06-10 加入

某摸鱼集团

评论

发布
暂无评论
Vue组件入门(六)派发事件的参数传递_Vue 3_Augus_InfoQ写作社区