11.2.1 Prop基本用法-Vue.js从入门到精通(三)

当前位置:　首页>> 技术小册>> Vue.js从入门到精通(三)

### 11.2.1 Prop基本用法

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

#### 11.2.1.1 定义Props

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

```javascript
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的名称）来访问这些传递进来的值。

```html

<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`定义类型验证和默认值。

```javascript
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`的值来改变状态，它应该使用数据属性或计算属性来作为中间状态。

```javascript
// 子组件
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()方法，或者用一个全新的对象替换掉原对象。

```javascript
// 假设有一个对象类型的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应用的重要基石。

该分类下的相关小册推荐：

Vue面试指南

移动端开发指南

Vue3技术解密

Vue.js从入门到精通(四)

VUE组件基础与实战

Vue.js从入门到精通(一)

TypeScript和Vue从入门到精通(四)

TypeScript和Vue从入门到精通(一)

TypeScript和Vue从入门到精通(五)

TypeScript和Vue从入门到精通(三)

vuejs组件实例与底层原理精讲

Vue源码完全解析