vue3组件通讯之props

1. 定义 Props

在子组件中，使用 defineProps 函数来定义 props。defineProps 接收一个对象作为参数，该对象的键是 prop 的名称，值是 prop 的类型或配置选项。

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

// 定义一个名为 message 的字符串类型的 prop
const props = defineProps<{
  message: string;
}>();
</script>

2. 使用 Props

在子组件的模板中，可以直接使用 props 对象访问 prop 的值。

<template>
  <div>
    <p>来自父组件的消息：{{ props.message }}</p>
  </div>
</template>

3. Props 的类型

可以使用 TypeScript 或 JavaScript 对象来定义 props 的类型。

TypeScript:

const props = defineProps<{
  message: string;
  count: number;
  isActive: boolean;
  user: { name: string; age: number };
}>();

JavaScript:

const props = defineProps({
  message: String,
  count: Number,
  isActive: Boolean,
  user: Object,
});

4. Props 的验证

可以使用 defineProps 的第二个参数来进行 props 的验证。

const props = defineProps({
  message: {
    type: String,
    required: true, // 必填项
    default: '默认消息', // 默认值
    validator: (value) => { // 自定义验证函数
      return value.length > 5;
    },
  },
});

5. 传递 Props

在父组件中，使用 v-bind 指令或简化的 : 语法来传递 props。

<template>
  <div>
    <MyComponent message="Hello from parent!" />
    <MyComponent :count="10" />
  </div>
</template>

6. Props 的单向数据流

props 的数据流是单向的，即父组件的数据会传递给子组件，但子组件不能直接修改 props 的值。如果需要修改，应该通过自定义事件通知父组件进行修改。

总结

props 是 Vue 3 中进行父子组件通讯的重要机制，通过 defineProps 定义 props，使用 props 对象访问 prop 的值，并可以使用 defineProps 的第二个参数进行 props 的验证。记住 props 的数据流是单向的，子组件不能直接修改 props 的值。

希望本教程能够帮助你理解 Vue 3 中 props 的使用方法。

附加内容：

• defineEmits: 用于子组件向父组件发送事件。
• v-model: 用于双向数据绑定，可以简化父子组件之间的数据交互。
• Provide/Inject: 用于跨多层级组件通讯。