【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的一切疑问,大家可以在评论区留言提问。
更多推荐
已为社区贡献3条内容
所有评论(0)