11.2.1 Prop基本用法

在Vue.js的组件化开发模式中，props（属性）是父组件与子组件之间通信的桥梁。它们允许父组件向子组件传递数据，但不允许子组件直接修改传入的数据（除非使用.sync修饰符或v-model自定义模式，这将在后续章节讨论）。理解和掌握props的基本用法，是深入学习Vue.js组件化的关键一步。本章节将详细介绍props的定义、使用、类型验证、默认值设置以及非响应式处理等内容。

11.2.1.1 定义Props

在Vue组件中，props可以在组件的props选项中定义。这个选项是一个对象，其属性名即为传递给组件的属性名，属性值可以是类型定义、验证函数、默认值等。

Vue.component('my-component', {
  props: ['title', 'likes', 'isPublished', 'commentIds', 'author'],
  // 模板
  template: `
    <div>
      <h1>{{ title }}</h1>
      <p v-if="isPublished">
        {{ likes }} Likes
      </p>
      <!-- 其他内容 -->
    </div>
  `
})

上述代码中，my-component组件定义了五个props：title、likes、isPublished、commentIds和author。这些props可以在父组件的模板中通过属性（attribute）的形式传递给my-component。

11.2.1.2 使用Props

在子组件的模板或计算属性、方法中，可以直接通过this.propName（其中propName是prop的名称）来访问这些传递进来的值。

<!-- 父组件模板 -->
<my-component title="Hello Vue!" likes="100" :is-published="true"></my-component>

注意，对于布尔类型的props（如isPublished），当你想通过属性传递一个布尔值时，需要使用v-bind（或简写为:）来确保传递的是正确的值类型，因为HTML属性值是字符串类型，直接写isPublished="true"实际上传递的是字符串"true"而非布尔值true。

11.2.1.3 类型验证与默认值

为了更好地维护组件的健壮性，Vue允许你为props定义类型验证和默认值。

Vue.component('my-component', {
  props: {
    // 基础类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多种可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组的默认值必须从一个工厂函数返回
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].includes(value)
      }
    }
  }
})

在上面的例子中，propA、propB、propC、propD、propE分别展示了基础类型检查、多种类型、必填项、默认值（针对基本类型和对象/数组）以及自定义验证函数的用法。

11.2.1.4 单向数据流

Vue官方强调props是单向绑定的：父组件的属性变化时，会传递到子组件中；但是，子组件内部不应该直接修改由父组件传入的props值。如果子组件需要基于某个prop的值来改变状态，它应该使用数据属性或计算属性来作为中间状态。

// 子组件
Vue.component('my-component', {
  props: ['initialCount'],
  data() {
    return {
      count: this.initialCount // 使用data属性作为中间状态
    }
  },
  template: `
    <button @click="count++">{{ count }}</button>
  `
})

在这个例子中，虽然initialCount是一个prop，但子组件内部通过data中的count来追踪其变化，从而避免了直接修改prop。

11.2.1.5 非响应式Props

在Vue 2.x中，由于JavaScript的限制，Vue不能检测对象属性的添加或删除。这意味着，如果你有一个对象类型的prop，并且你在子组件中尝试添加新的属性到该对象上，Vue将不会追踪这些变化，从而导致视图不会更新。为了解决这个问题，你可以使用Vue.set()方法，或者用一个全新的对象替换掉原对象。

// 假设有一个对象类型的prop: user
props: {
  user: Object
},
methods: {
  updateUsername(newName) {
    // 这不会触发视图更新
    // this.user.name = newName;
    // 这将触发视图更新
    this.$set(this.user, 'name', newName);
    // 或者
    this.user = { ...this.user, name: newName };
  }
}

在Vue 3.x中，由于使用了Proxy代替Object.defineProperty进行响应式处理，这个问题得到了显著改善，但了解如何在旧版本Vue中处理仍然是有价值的。

结论

通过本章的学习，我们深入了解了Vue.js中props的基本用法，包括如何定义、使用、类型验证、设置默认值以及处理非响应式更新的情况。掌握这些技能，将有助于你更有效地在Vue项目中利用组件化开发模式，构建出更加灵活、可维护的Web应用。随着Vue生态的不断发展，对props的深入理解和灵活运用将成为你开发高效、高质量Vue应用的重要基石。