如何发出具有严格类型负载的事件？| Vue 3 组合 API + TypeScript

Question

我正在尝试使用 TypeScript 学习 Vue 3 Composition API，特别是如何使用严格类型化的有效负载发出事件。

我在下面有一个例子，但我不确定这是否是正确的方法。所以我的问题是是否还有其他方法可以发出具有严格类型负载的事件？

---

例子

我使用了这个包： https: //www.npmjs.com/package/vue-typed-emit并使其与下面的示例一起使用，其中我将布尔值从子组件传递到父组件：

子组件：

<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

<script setup>用于声明组件发出的事件的Vue编译器宏。预期参数与组件选项相同emits。

运行时声明示例：

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

基于类型的声明示例：

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

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

这仅在内部可用<script setup>，在输出中编译出来，不应该在运行时实际调用。