组合式 API_为组件的 emits 标注类型

组件之间传递数据，有了props的父传子，还需要emit子传父

emit 函数的类型标注也可以实现类型声明

xxxxxxxxxx
<template>
    <button @click="clickHandler">发送数据</button>
</template>
<script setup lang="ts">
// const emit = defineEmits(["onSomeEvent"])
const emit = defineEmits<{
    (e:'onSomeEvent',value:string):void
}>()

const clickHandler = () =>{
    emit("onSomeEvent","list数据")
}
</script>

xxxxxxxxxx
<template>
  <HomeListView @onSomeEvent="getSomeData"/>
</template>
<script setup lang="ts">

import HomeListView from "./HomeListView.vue"

const getSomeData = (data:string) =>{
  console.log(data)
}

</script>

基于类型的声明使我们可以对所触发事件的类型进行更细粒度的控制。

若没有使用 <script setup>，defineComponent() 也可以根据 emits 选项推导暴露在 setup 上下文中的 emit 函数的类型

xxxxxxxxxx
<template>
    <button @click="clickHandler">发送数据</button>
</template>
<script lang="ts">

import { defineComponent } from 'vue'

export default defineComponent({
    emits: ['onSomeEvent'],
    setup(props,{ emit }){
        const clickHandler = function(){
            emit('onSomeEvent','list数据2') // <-- 类型检查 / 自动补全
        }
        return {
            clickHandler
        }
    }
})

</script>