在vue3+ts中使用props和$emit

在 Vue 3 中使用 TypeScript 和 Props 时，需要在组件中定义 `props`，并且需要在 `setup()` 中使用 `defineProps()` 函数来声明接收的属性。例如：

import { defineComponent, defineProps } from 'vue';

interface MyProps {
  name: string;
  age: number;
}

export default defineComponent({
  props: {
    name: String,
    age: {
      type: Number,
      required: true,
    },
  },
  setup(props) {
    const { name, age } = defineProps<MyProps>(props);
    // ...
  },
});

在 `$emit` 事件中，需要使用 `defineEmits()` 函数来声明组件发出的事件。例如：

import { defineComponent, defineEmits } from 'vue';

interface MyEvents {
  update: (value: string) => void;
}

export default defineComponent({
  emits: ['update'],
  setup(props, ctx) {
    const { emit } = defineEmits<MyEvents>(ctx);
    // ...
  },
});

然后，可以在组件中使用 `$emit` 来触发事件。例如：

emit('update', 'new value');