【vue3】vue3 setup如何使用emit？

setup是一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口。
他接受两个参数：

{Data} props
{SetupContext} context

emit就是第二个参数的一个属性：
下面看一下用例，子组件 renderTest.vue：

<script lang="ts">
import { h } from "vue"
interface Data {
  [key: string]: unknown
}
interface SetupContext {
  //这里还有其他的，为了避免混淆，就不写了。
  emit: (event: string, ...args: unknown[]) => void
}

export default {
	setup(props:Data,{emit}:SetupContext){   //emit从这里拿到
		function change(){
			emit("alertSome",666)  //emit的使用
		}
		return ()=>[
			h("button",{onClick:change},"子组件按钮"),	
		]
	}
}
</script>

父组件test.vue：

<script lang="ts">
import RenderTest from './renderTest.vue'
export default {
	components:{RenderTest},
	setup(){
       const alertSome = (val：number):void=> {alert(val)}
       return {
           alertSome
       }
	}
}
</script>
<template>
    <div>
        <RenderTest @alertSome="alertSome"></RenderTest>     
    </div>
</template>

点击子组件按钮，触发事件。

如果有的同学喜欢用setup语法糖，那么就不能这么使用emit了，需要引入defineEmits：

<script setup lang="ts">
import { defineEmits } from 'vue'

const emit = defineEmits(["alertSome"])
function clickButton(){
    //todo
    emit("alertSome",6666)
}
</script>
//由于setup语法糖不支持render函数，我在这里改成了template
<template>
    <div>
        <button @click="clickButton">点击我</button>
    </div>
</template>

父组件的使用方式同上文test.vue

有帮助的话，点个赞呗！关于vue3的一切疑问，大家可以在评论区留言提问。

上一篇：js斐波那契数列的多种算法
下一篇：vue3 setup如何使用router和route？