vue3 的 lang=“ts“ setup 方式 父子组件传参

在 Vue 3 中使用 lang="ts" 和 setup 语法进行父子组件传参，可以通过 props 从父组件向子组件传递数据，或通过 emits 从子组件向父组件发送事件。以下是详细步骤。

1. 父组件向子组件传递数据

假设我们有一个父组件 ParentComponent.vue 和一个子组件 ChildComponent.vue，并且在父组件中想要向子组件传递数据。

ParentComponent.vue

<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

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

const parentMessage = ref('Hello from Parent');
</script>

• parentMessage 是父组件中的数据，通过 message 属性传递给子组件。
• 使用 lang="ts" 开启 TypeScript 支持。

ChildComponent.vue

<template>
  <div>{{ message }}</div>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';

interface Props {
  message: string;
}

const props = defineProps<Props>();
</script>

• 在子组件中，使用 defineProps 定义了 Props 接口，并在其中定义 message 属性类型为 string。
• 子组件可以通过 props.message 来访问父组件传递的数据。

2. 子组件向父组件发送事件

子组件可以通过 emit 方法触发自定义事件，让父组件接收事件。

ParentComponent.vue

<template>
  <div>
    <ChildComponent @updateMessage="handleUpdateMessage" />
    <p>{{ updatedMessage }}</p>
  </div>
</template>

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

const updatedMessage = ref('');

function handleUpdateMessage(newMessage: string) {
  updatedMessage.value = newMessage;
}
</script>

• handleUpdateMessage 函数处理来自子组件的事件，并更新 updatedMessage 的值。

ChildComponent.vue

<template>
  <button @click="sendMessage">Send Message to Parent</button>
</template>

<script lang="ts" setup>
import { defineEmits } from 'vue';

const emit = defineEmits<{
  (event: 'updateMessage', newMessage: string): void;
}>();

function sendMessage() {
  emit('updateMessage', 'Hello from Child');
}
</script>

• 使用 defineEmits 定义 updateMessage 事件，指定事件名称和参数类型。
• sendMessage 函数触发 updateMessage 事件，将消息传递给父组件。