vue tsx 组件通信

在 Vue 中，通过组件通信可以实现不同组件之间的数据传递和交互。对于使用 TypeScript 编写的 Vue 组件，可以使用以下几种方式来进行组件通信：

1. Props：通过在父组件中定义属性（props），然后将值传递给子组件。子组件可以通过使用 `@Prop` 装饰器来声明接收的属性类型。这种方式主要适用于父子组件之间的通信。

// 子组件 Child.tsx
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class Child extends Vue {
  @Prop() message!: string;

  // 使用 this.message 来访问父组件传递的属性值
}

// 父组件 Parent.tsx
<template>
  <div>
    <child :message="parentMessage"></child>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Child from './Child.vue';

@Component({
  components: {
    Child,
  },
})
export default class Parent extends Vue {
  parentMessage = 'Hello from parent';
}
</script>

2. Emit（自定义事件）：子组件可以通过 `$emit` 方法触发一个自定义事件，并且可以传递数据给父组件。父组件可以通过在子组件上使用 `v-on` 或 `@` 来监听并处理这些自定义事件。

// 子组件 Child.tsx
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class Child extends