vue3 子传父 ts

### 回答1：
在 Vue 3 中，您可以使用 `emit` 和 `on` 方法来实现子组件向父组件传递数据。下面是一个使用 TypeScript 的示例代码：

在子组件中，定义一个 `emit` 方法来触发一个自定义事件：

import { defineComponent, PropType, ref } from 'vue'

export default defineComponent({
  props: {
    message: {
      type: String as PropType<string>,
      required: true
    }
  },
  setup(props, { emit }) {
    const count = ref(0)

    const handleClick = () => {
      count.value++
      emit('update:count', count.value)
    }

    return {
      count,
      handleClick
    }
  }
})

在父组件中，使用 `on` 方法监听子组件的自定义事件：

import { defineComponent, ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default defineComponent({
  components: {
    ChildComponent
  },
  setup() {
    const message = ref('Hello, world!')
    const count = ref(0)

    const handleCountUpdate = (value: number) => {
      count.value = value
    }

    return {
      message,
      count,
      handleCountUpdate
    }
  }
})

在模板中，将子组件的 `message` 和 `count` 属性分别绑定到父组件的 `message` 和 `count` 变量上，同时将 `handleCountUpdate` 方法作为 `update:count` 事件的处理函数：

<template>
  <div>
    <child-component :message="message" @update:count="handleCountUpdate" />
    <p>Message: {{ message }}</p>
    <p>Count: {{ count }}</p>
  </div>
</template>

### 回答2：
在Vue3中，子组件向父组件传递数据需要通过自定义事件和props实现。使用TypeScript进行开发可以提供类型检查和更好的开发体验。

首先，在父组件中，需要在定义子组件的地方使用`v-model`指令，将子组件内部的数据和父组件的数据进行双向绑定。例如：

<template>
  <div>
    <child-component v-model="childData"></child-component>
    <p>父组件数据：{{ childData }}</p>
  </div>
</template>

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

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

    return {
      childData,
    };
  },
});
</script>

然后，在子组件中，需要使用`emits`选项来声明自定义事件，并在需要的地方通过`$emit`方法触发该事件并传递数据给父组件。例如：

<template>
  <div>
    <input type="text" v-model="data" @input="handleChange" />
  </div>
</template>

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

export default defineComponent({
  props: ['modelValue'],
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const data = ref('');

    const handleChange = () => {
      emit('update:modelValue', data.value);
    };

    return {
      data,
      handleChange,
    };
  },
});
</script>

在子组件中，我们通过`props`选项声明了一个`modelValue`的prop，同时通过`emits`选项声明了一个`update:modelValue`的自定义事件，表示该组件可以接受一个名为`modelValue`的prop，并且可以通过`update:modelValue`事件向父组件传递数据。

通过以上的实例，我们可以应用Vue3和TypeScript来实现子组件向父组件的数据传递。使用`v-model`指令和自定义事件可以实现子组件和父组件之间的双向绑定，并且在TypeScript下进行开发可以提供类型检查来减少开发错误。

### 回答3：
在Vue 3中，要实现子组件向父组件传递信息，可以通过自定义事件和回调函数来实现。在使用TypeScript编写Vue 3应用程序时，我们可以使用类型定义来提供更好的类型安全性。

首先，在子组件中，我们可以使用`defineEmits`函数来声明可以触发的事件。例如，假设我们想要在子组件中触发一个名为`update`的事件，可以这样声明：

import { defineEmits } from 'vue';

defineEmits(['update']);

然后，在子组件中，我们可以使用`$emit`函数来触发自定义事件。例如，当某些状态在子组件中发生变化时，我们可以通过以下方式将信息传递给父组件：

import { defineEmits, reactive, ref } from 'vue';

export default {
  emits: ['update'],
  setup() {
    const data = reactive({ message: 'Hello from child' });

    const handleClick = () => {
      data.message = 'Updated message!';
      this.$emit('update', data.message);
    }

    return {
      data,
      handleClick,
    }
  },
}

在父组件中，我们可以通过监听子组件的自定义事件来接收信息。例如，我们可以在父组件的模板中这样使用子组件：

<template>
  <div>
    <child-component @update="handleUpdate"></child-component>
    <p>Message: {{ message }}</p>
  </div>
</template>

并在父组件的方法中实现事件的处理逻辑：

export default {
  data() {
    return {
      message: '',
    }
  },
  methods: {
    handleUpdate(message: string) {
      this.message = message;
    },
  },
}

通过这种方式，子组件可以将信息传递给父组件，并且在TypeScript中，由于有类型定义的支持，可以提供更好的类型安全性。