ts语言vue3实现父页面和子页面相互传递数据

在Vue3中，TS（TypeScript）是一种静态类型的JavaScript超集，可以用于Vue应用程序以提供更强的类型安全性和更好的开发体验。要实现在Vue组件间的父子通信，你可以使用以下几种方法：

1. **props** (属性)：父组件向子组件传值最常见的方式就是通过`props`。在父组件中，定义要传递的数据类型，并将其作为属性传递给子组件。子组件在`props`中声明接受的类型。

// 父组件.vue
<template>
  <ChildComponent :message="parentMessage" />
</template>

<script lang="ts">
import ChildComponent from '@/components/ChildComponent.vue';

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: 'Hello from parent',
    };
  },
};
</script>

// 子组件.vue
<template>
  <div>{{ message }}</div>
</template>

<script lang="ts">
export default {
  props: {
    message: String, // 定义类型为字符串
  },
};
</script>

2. **自定义事件（$emit/$on）**：子组件通过 `$emit` 发送事件，父组件监听这个事件并处理数据。

// 子组件.vue
<template>
  <button @click="$emit('update:message', 'New message from child')">Send Message</button>
</template>

<script lang="ts">
export default {
  methods: {
    sendMessage() {
      this.$emit('update:message', 'From child');
    }
  }
};
</script>

// 父组件.vue
<template>
  <ChildComponent v-on:update:message="handleMessageUpdate"></ChildComponent>
</template>

<script lang="ts">
import ChildComponent from '@/components/ChildComponent.vue';

export default {
  components: { ChildComponent },
  methods: {
    handleMessageUpdate(message: string) {
      console.log('Received:', message);
    }
  }
};
</script>