Vue3 TypeScript 父子组件交互示例

以下是一个简单的 Vue3 TypeScript 父子组件示例：

父组件：

<template>
  <div>
    <h1>父组件</h1>
    <child-component :message='message' @update-message='updateMessage'></child-component>
    <p>{{ message }}</p>
  </div>
</template>

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

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

    const updateMessage = (value: string) => {
      message.value = value;
    };

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

子组件：

<template>
  <div>
    <h2>子组件</h2>
    <button @click='updateMessage'>Update Message</button>
  </div>
</template>

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

export default defineComponent({
  name: 'ChildComponent',
  props: {
    message: {
      type: String,
      required: true,
    },
  },
  setup(props: { message: string }, context: SetupContext) {
    const newMessage = ref(props.message);

    const updateMessage = () => {
      newMessage.value = 'New Message';
      context.emit('update-message', newMessage.value);
    };

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

在父组件中，我们引入了子组件并将`message`属性传递给它。我们还定义了一个`updateMessage`函数，该函数会在子组件更新`message`属性时被调用。

在子组件中，我们接收`message`属性并将其存储在一个`newMessage`引用中。我们还定义了一个`updateMessage`函数，该函数将更新`newMessage`并使用`context.emit`方法将`update-message`事件发送回父组件。

注意：在Vue3中，我们使用`defineComponent`方法定义组件，而不是`Vue.component`方法。另外，我们使用`setup`函数来定义组件的逻辑，而不是传统的`data`、`computed`和`methods`属性。