vue3 defineemits 配合ts 子页面向父页面传值

在Vue3中，可以使用`defineEmits`函数来定义组件的emits属性，以指定组件可以发出的事件类型。如果要结合TypeScript使用，在子组件中使用`$emit`方法触发父组件定义的事件即可。

以下是一个子组件向父组件传递数据的示例：

<template>
  <div>
    <button @click="handleClick">Click me</button>
  </div>
</template>

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

interface CustomClickEvent {
  data: string
}

export default defineComponent({
  emits: ['customClick'],
  methods: {
    handleClick() {
      const event: CustomClickEvent = {
        data: 'Hello, parent!'
      }
      this.$emit('customClick', event)
    }
  }
})
</script>

在父组件中，需要定义一个与子组件emits属性中相同的事件来监听子组件的触发，并在回调函数中接收子组件传递的数据：

<template>
  <div>
    <child-component @customClick="handleCustomClick"></child-component>
    <p>{{ message }}</p>
  </div>
</template>

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

export default defineComponent({
  methods: {
    handleCustomClick(event: { data: string }) {
      this.message = event.data
    }
  },
  data() {
    return {
      message: ''
    }
  }
})
</script>

这样，就可以在子组件中触发自定义事件，并将数据传递给父组件了。需要注意的是，子组件和父组件中定义的事件名必须相同，并且事件的数据类型也应该在两个组件中保持一致。