Vue 使用指南 - props 与 data

道具

数据

总结

Vue 提供了两种存储变量的方式：一种是使用props，另一种是使用data。这两种方式都可以在 Vue 实例上定义，也可以在组件上定义。

乍一看，它们可能令人困惑，因为它们非常相似，而且似乎用途也类似。

在本文中，我将尝试区分它们，希望能够更清楚地说明它们之间的区别。

道具

props 是一种将数据从父组件传递到其任何子组件的方式。

当我们使用 Vue 构建应用程序时，我们采用的是层级式结构。这意味着什么呢？这意味着，从 Vue 实例开始，数据自上而下流动，父级创建的每个数据变量都可以通过属性传递给子级。

props 可以定义为字符串数组（名称），但这无法对传递给它的值进行验证。如果需要验证，则需要列出一个具有特定配置的对象。

另外值得一提的是，我们可以为每个属性传递动态值或静态值。

属性以数组形式传递：

export default {
  name: 'my-component',
  props: ['name', 'surname']
}

将道具作为对象：

export default {
  name: 'my-component',
  props: {
    name: String, // must be a string
    surname: String, // must be a string
    propA: [String, Number], // allows multiple types
    propB: { // required string
      type: String,
      required: true
    },
    propC: {
      type: Number,
      default: 15 // the default value
    },
    propD: {
      validator: function (value) { // custom validator function
        return true
      }
    }
  }
}

如果在开发模式下运行 Vue，每次 prop 类型无效时都会抛出警告。但在生产模式下则不会出现这种情况。

好了，现在我们知道了如何定义 props，接下来应该看看如何给它传递值。这可以通过模板来实现。

模板：

<template>
  <div>
    Name: {{name}}
    Surname: {{surname}}
  </div>
</template>

我们可以传递一个静态值：

<my-component name="John" surname="Doe"></my-component>

或者，如果需要动态值，我们需要使用v-bind指令：

<my-component v-bind:name="dynamicName" v-bind:surname="dynamicSurname"></my-component>

请注意，驼峰式命名的属性需要使用对应的 kebab 式命名。但是，如果使用字符串模板，则此限制不适用。

说了这么多，我们应该强调尊重单向数据流的重要性。

所有属性在子属性和父属性之间形成单向绑定：当父属性更新时，它会向下传递到子属性，但反过来则不会。

这意味着我们无需担心子组件的属性是否已从父组件获取最新值。props 是响应式的，这一切都由 Vue 自动完成。Vue 会确保在父组件值更改后，每个属性都已更新。如果我们尝试手动更新子组件的值，框架会在控制台中抛出警告。

数据

数据是应用程序中每个组件的私有内存，您可以在其中存储它所需的任何变量。

数据对象就像组件状态的模式。

换句话说，我们应该只为相应组件使用的变量使用数据配置。如果需要将这些数据传递给另一个组件，则需要使用 props 将其传递给子组件，或者使用事件将其传递给父组件。

我们的数据应该配置成一个函数，该函数返回一个对象，其中每个属性代表一个变量，这些变量将在我们的模板中使用。通过将数据属性定义为函数，我们可以确保组件的每个实例都拥有数据对象的独立副本。

<template>
    <span>{{message}}</span>
</template>

export default {
  name: 'my-component',
  data() {
    return {
      message: 'Hello!'
    }
  }
}

在上面的示例中，如果该message属性没有被定义为数据变量，框架会发出警告，提示我们正在尝试使用不存在的内容。

对象中定义的每个变量data都是响应式的。这意味着，就像 props 示例一样，我们无需担心值和模板的更新。每当应用程序中发生相应的更改时，框架都会自动处理这些更新。

基本上，只要我们更新的是响应式属性（props、计算属性以及数据中的任何内容），框架就会为我们处理更新。

总结

虽然 props 和 data 很相似，但此时它们的区别应该更清楚一些，它们应该一起使用，以便在我们的应用程序中构建正确的数据流。

我认为这句话指出了关键的定义：

数据和属性都是反应式的，但数据更像是“我出生时所继承的特定基因”，而属性则是“我期望从父母那里获得这些基因”。

感谢阅读，我们下篇文章再见。