Vue3 的 emit 该怎么写, vue2 对比

发布时间:2023年12月31日

Vue3 的 emit 该怎么写, vue2 对比

这是个新手问题,从 vue2 转到 vue3 之后,一时间不知道该怎么用它了。

vue2 用法

vue2 在 template 中 和 在方法中的用法如下:

<template>
	<button @click="$emit('clicked', '要传递的数据')">按钮</button>
</template>

<script>
	export default {
		methods: {
			buttonClicked(){
				this.$emit('blicked', '要传递的数据')
			}
		}
	}
</script>

vue3 用法

vue3 的写法如下,其实变化不大,就是把 $ 去掉,首先声明一个 emit 变量,接下来就是一样的用法了。
当然,它还能进行验证,更高级的用法可以看官方的说明:

vue3: 声明触发的事件

<template>
	<button @click="emit('clicked', '要传递的数据')">按钮</button>
</template>

<script lang="ts" setup>

const emit = defineEmits(['click'])
funtion buttonClicked(){
	emit('blicked', '要传递的数据')
}
</script>

在这里插入图片描述

文章来源:https://blog.csdn.net/KimBing/article/details/135315741
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。