vue3 子传父 ts

### 回答1：
在 Vue3 中，可以通过 `provide` 和 `inject` 方法实现子组件向父组件传值。同时，由于您提到了 TypeScript，这里提供一份使用 TypeScript 实现子传父的示例代码：

在父组件中，使用 `provide` 方法提供一个 `changeValue` 函数和一个 `value` 变量：

import { defineComponent, provide, ref } from 'vue';

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

    function changeValue(newValue: string) {
      value.value = newValue;
    }

    provide('changeValue', changeValue);
    provide('value', value);

    return {};
  },
});

在子组件中，使用 `inject` 方法获取 `changeValue` 函数和 `value` 变量，并使用它们实现子传父：

import { defineComponent, inject } from 'vue';

export default defineComponent({
  setup() {
    const changeValue = inject<(newValue: string) => void>('changeValue');
    const value = inject<string>('value');

    function onButtonClick() {
      if (changeValue) {
        changeValue('new value');
      }
    }

    return {
      value,
      onButtonClick,
    };
  },
});

在子组件中，通过 `inject` 方法获取到了父组件中提供的 `changeValue` 函数和 `value` 变量，并在按钮点击事件中调用 `changeValue('new value')` 实现了子传父。

### 回答2：
在Vue 3中，要将子组件的数据传递给父组件，可以使用props属性和事件机制。
首先，在子组件中定义一个 prop，并将需要传递给父组件的数据作为其值。可以在子组件内的props选项中声明需要传递的数据类型。

例如，在子组件中声明一个名为message的prop，其类型为字符串：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendMessage">发送消息给父组件</button>
  </div>
</template>

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

export default defineComponent({
  props: {
    message: {
      type: String,
      required: true
    }
  },
  setup(props, context) {
    const sendMessage = () => {
      context.emit('sendMessageToParent', 'Hello from child component');
    }

    return {
      sendMessage
    };
  }
});
</script>

然后，在父组件中使用子组件时，通过v-bind指令将父组件的数据传递给子组件的prop：

<template>
  <div>
    <ChildComponent :message="parentMessage" @sendMessageToParent="receiveMessage"></ChildComponent>
  </div>
</template>

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

export default defineComponent({
  data() {
    return {
      parentMessage: "Hello from parent component"
    };
  },
  methods: {
    receiveMessage(message: string) {
      console.log('Received message from child component:', message);
    }
  }
});
</script>

在父组件中，可以通过事件监听器来接收子组件传递的数据。当子组件中的按钮被点击时，调用`context.emit('sendMessageToParent', 'Hello from child component')`方法触发一个名为`sendMessageToParent`的事件，并传递字符串参数。父组件中可以使用`@sendMessageToParent="receiveMessage"`来监听该事件，并在`receiveMessage`方法中接收子组件传递的数据。

### 回答3：
在Vue3中，子组件向父组件传递数据需要通过事件进行。使用TypeScript可以更好地处理类型安全。

首先，在子组件中，我们需要定义一个事件，并将要传递的数据定义为一个属性。例如：

// 子组件
<template>
  <button @click="passData">传递数据到父组件</button>
</template>

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

export default defineComponent({
  name: 'ChildComponent',
  props: {
    data: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const passData = () => {
      emit('passDataToParent', props.data);
    };

    return {
      passData
    };
  }
});
</script>

其中，`props`参数用于接收父组件传递的属性，`emit`函数用于触发事件，并将需要传递的数据作为参数传入。

接下来，在父组件中，我们需要监听子组件触发的事件，并在事件回调函数中处理传递的数据。例如：

// 父组件
<template>
  <div>
    <p>从子组件接收到的数据：{{ receivedData }}</p>
    <ChildComponent :data="parentData" @passDataToParent="handleDataFromChild" />
  </div>
</template>

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

export default defineComponent({
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  setup() {
    const parentData = ref('Hello');

    const handleDataFromChild = (data: string) => {
      console.log('接收到子组件传递的数据：', data);
      parentData.value = data;
    };

    return {
      parentData,
      handleDataFromChild
    };
  }
});
</script>

在父组件中，`parentData`用于传递给子组件的属性，`handleDataFromChild`是事件处理函数，用于接收子组件传递的数据。

这样子组件就可以通过触发事件将数据传递给父组件，并在父组件中进行处理和使用了。在TypeScript中，还可以对数据进行类型检查和声明，提高代码的健壮性和可维护性。