Vue3 的 emit 该怎么写, vue2 对比
这是个新手问题,从 vue2 转到 vue3 之后,一时间不知道该怎么用它了。
vue2 用法
vue2 在 template 中 和 在方法中的用法如下:
<template>
<button @click="$emit('clicked', '要传递的数据')">按钮</button>
</template>
<script>
export default {
methods: {
buttonClicked(){
this.$emit('clicked', '要传递的数据')
}
}
}
</script>
vue3 用法
vue3 的写法如下,其实变化不大,就是把 $ 去掉,首先声明一个 emit 变量,接下来就是一样的用法了。
当然,它还能进行验证,更高级的用法可以看官方的说明:
vue3: 声明触发的事件
<template>
<button @click="emit('clicked', '要传递的数据')">按钮</button>
</template>
<script lang="ts" setup>
const emit = defineEmits(['click'])
funtion buttonClicked(){
emit('clicked', '要传递的数据')
}
</script>