Vue3 TS写法 子组件给父组件传值

在Vue 3中使用TypeScript编写子组件向父组件传值的方法有多种，以下是其中一种常见的方法：

1. 在子组件中定义一个可以被父组件访问的属性或方法，并在需要传递值的地方调用它。

子组件代码示例：

// MyChildComponent.vue
<template>
  <button @click="sendValueToParent">传递值给父组件</button>
</template>

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

export default defineComponent({
  emits: ['valueToParent'],
  methods: {
    sendValueToParent() {
      const value = 'Hello, Parent!';
      this.$emit('valueToParent', value);
    }
  }
});
</script>

父组件代码示例：

// MyParentComponent.vue
<template>
  <div>
    <p>从子组件接收的值：{{ receivedValue }}</p>
    <my-child-component @valueToParent="handleValueFromChild" />
  </div>
</template>

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

export default defineComponent({
  setup() {
    const receivedValue = ref('');

    const handleValueFromChild = (value: string) => {
      receivedValue.value = value;
    };

    return {
      receivedValue,
      handleValueFromChild
    };
  }
});
</script>

在子组件中，通过`this.$emit`方法触发一个自定义事件`valueToParent`，并传递需要传递给父组件的值。父组件通过监听这个事件，在事件处理函数中获取子组件传递的值，并进行相应的处理。

请注意，需要使用`emits`选项来声明子组件可以触发的自定义事件。这样做是为了让TypeScript能够正确地推断和验证事件名称和参数类型。

这只是一种方法，你还可以使用provide/inject API、vuex等其他方式来实现子组件向父组件传值。具体使用哪种方法取决于你的需求和项目结构。