vue3 ts父子组件传值

Vue 3 中使用 TypeScript 的父子组件传值可以通过 props 和 emits 进行通信。

在父组件中，通过 props 定义需要传递给子组件的属性，然后在子组件中使用 `@Prop` 装饰器将该属性声明为一个 prop。例如：

// 父组件
<template>
  <ChildComponent :message="parentMessage" @update:message="updateMessage" />
</template>

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

export default defineComponent({
  components: {
    ChildComponent,
  },
  setup() {
    const parentMessage = ref('');

    const updateMessage = (message: string) => {
      // 处理从子组件传递过来的数据
      console.log('Received message from child component:', message);
    };

    return {
      parentMessage,
      updateMessage,
    };
  },
});
</script>

// 子组件
<template>
  <input v-model="message" @input="sendMessage" />
<