深入理解 Vue.js 中的 Props：从声明到校验，全面提升组件通信效率

在 Vue.js 的组件化开发中，Props（属性）扮演着至关重要的角色。它们是父组件与子组件之间通信的桥梁，使得数据能够从上层传递到下层。本文将带你深入探讨 Vue.js 中的 Props，从声明到传递细节，再到校验，帮助你编写更加高效和健壮的组件。

一、Props 声明：打好组件通信的基础

1.1 显式声明 Props

在 Vue.js 中，组件需要显式声明它所接受的 Props，这样 Vue 才能正确处理外部传入的数据。

使用 <script setup> 声明 Props

在单文件组件中使用 <script setup> 时，你可以利用 defineProps() 宏来声明 Props：

<script setup>
const props = defineProps(['foo']);
console.log(props.foo);
</script>

不使用 <script setup> 声明 Props

对于没有使用 <script setup> 的组件，你可以通过 props 选项来声明：

export default {
  props: ['foo'],
  setup(props) {
    console.log(props.foo);
  }
}

1.2 Props 声明的高级用法

除了简单的字符串数组，你还可以使用对象形式来声明 Props，这样可以进行更细致的类型定义：

defineProps({
  title: String,
  likes: Number
});

二、传递 Props 的细节：确保数据正确传递

2.1 命名格式与大小写转换

在定义 Props 时，应使用 camelCase 形式，而在父组件中使用时，则应写为 kebab-case 形式。

2.2 静态 Props 与动态 Props

Vue.js 允许你以静态或动态的方式传递 Props。

2.3 传递不同类型的值

你可以传递不同类型的值，如 Number、Boolean、Array 和 Object。需要注意的是，传递 JavaScript 表达式时，需要使用 v-bind：

<BlogPost v-bind="post" />

2.4 使用对象绑定多个 Prop

如果你想要将一个对象的所有属性都作为 Props 传递，可以使用无参数的 v-bind：

const post = {
  id: 1,
  title: 'My Journey with Vue'
};

三、单向数据流：理解 Props 的不可变性

Vue.js 中的 Props 是单向绑定的，这意味着你不应该直接修改 Prop。如果你需要在组件内部使用 Prop 的值，可以定义一个局部数据属性或计算属性。

四、Prop 校验：确保数据的一致性

通过向 defineProps() 宏提供一个带有校验选项的对象，你可以对传入的 Props 进行校验：

defineProps({
  propE: {
    type: Number,
    default: 100
  },
  propF: {
    type: Object,
    default(rawProps) {
      return { message: 'hello' };
    }
  }
});

五、Boolean 类型转换：特殊处理

对于 Boolean 类型的 Props，Vue.js 提供了一种特殊的类型转换：

defineProps({
  disabled: Boolean
});

使用时，省略值会被视为 true，而单写名称则会被视为 false。