typescript - 如何使用严格类型的有效负载发出事件？ | Vue 3 Composition API + TypeScript

Question

我正在尝试使用 TypeScript 学习 Vue 3 Composition API，特别是如何使用严格类型的有效负载发出事件。
我在下面有一个例子，但我不确定它是否是正确的方法。所以我的问题是是否还有其他方法可以使用严格类型的有效负载发出事件？

示例
我用过这个包:https://www.npmjs.com/package/vue-typed-emit并让它与下面的示例一起工作，我将一个 bool 值从子组件传递给父组件:
子组件:

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import { CompositionAPIEmit } from 'vue-typed-emit'

interface ShowNavValue {
  showNavValue: boolean
}
interface ShowNavValueEmit {
  emit: CompositionAPIEmit<ShowNavValue>
}

export default defineComponent({
  name: 'Child',
  emits: ['showNavValue'],

  setup(_: boolean, { emit }: ShowNavValueEmit) {
    let showNav = ref<boolean>(false)

    watch(showNav, (val: boolean) => {
        emit('showNavValue', val)
    })

    return {
      showNav
    }
  }
})
</script>

父组件

<template>
  <div id="app">
    <Child @showNavValue="toggleBlurApp" />
    <div :class="{'blur-content': blurApp}"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import Child from './components/Child.vue';

export default defineComponent({
  name: 'Parent',
  components: {
    Child
  },

  setup() {
    let blurApp = ref<boolean>(false);

    let toggleBlurApp = (val: boolean) => {
      blurApp.value = val;
    }

    return { 
      blurApp, 
      toggleBlurApp 
    }
  }
});
</script>

<style lang="scss">
.blur-content{
  filter: blur(5px); 
  transition : filter .2s linear;
}
</style>

Answer 1

vue <script setup>用于声明组件已发出的编译器宏
事件。预期参数与组件 emits 相同选项。
示例运行时声明:

const emit = defineEmits(['change', 'update'])

基于类型的声明示例:

const emit = defineEmits<{
  (event: 'change'): void
  (event: 'update', id: number): void
}>()

emit('change')
emit('update', 1)

这仅在 <script setup> 内可用, 被编译在
输出和应该 不是 实际上在运行时被调用。