1.11.3 Prop
使用 Prop 传递数据
组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过prop才能下发到子组件中。
子组件要显式地用props
选项声明它预期的数据:
Vue.component('child', { // 声明 props props: ['message'], // 就像 data 一样,prop 也可以在模板中使用 // 同样也可以在 vm 实例中通过 this.message 来使用 template: '<span>{{ message }}</span>' })
然后我们可以这样向它传入一个普通字符串:
<child message="hello!"></child>
结果:
camelCase vs. kebab-case
HTML 特性是不区分大小写的。所以,当使用的不是字符串模板时,camelCase (驼峰式命名) 的 prop 需要转换为相对应的 kebab-case (短横线分隔式命名):
Vue.component('child', { // 在 JavaScript 中使用 camelCase props: ['myMessage'], template: '<span>{{ myMessage }}</span>' })
<!-- 在 HTML 中使用 kebab-case --> <child my-message="hello!"></child>
如果你使用字符串模板,则没有这些限制。
动态 Prop
与绑定到任何普通的 HTML 特性相类似,我们可以用v-bind
来动态地将 prop 绑定到父组件的数据。每当父组件的数据变化时,该变化也会传导给子组件:
<div id="prop-example-2"> <input v-model="parentMsg"> <br> <child v-bind:my-message="parentMsg"></child> </div>
new Vue({ el: '#prop-example-2', data: { parentMsg: 'Message from parent' } })
你也可以使用v-bind
的缩写语法:
<child :my-message="parentMsg"></child>
结果:
如果你想把一个对象的所有属性作为 prop 进行传递,可以使用不带任何参数的v-bind
(即用v-bind
而不是v-bind:prop-name
)。例如,已知一个todo
对象:
todo: { text: 'Learn Vue', isComplete: false }
然后:
<todo-item v-bind="todo"></todo-item>
将等价于:
<todo-item v-bind:text="todo.text" v-bind:is-complete="todo.isComplete" ></todo-item>
字面量语法 vs 动态语法
初学者常犯的一个错误是使用字面量语法传递数值:
<!-- 传递了一个字符串 "1" --> <comp some-prop="1"></comp>
因为它是一个字面量 prop,它的值是字符串"1"
而不是一个数值。如果想传递一个真正的 JavaScript 数值,则需要使用v-bind
,从而让它的值被当作 JavaScript 表达式计算:
<!-- 传递真正的数值 --> <comp v-bind:some-prop="1"></comp>
单向数据流
Prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意间修改了父组件的状态,来避免应用的数据流变得难以理解。
另外,每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了,Vue 会在控制台给出警告。
在两种情况下,我们很容易忍不住想去修改 prop 中数据:
- Prop 作为初始值传入后,子组件想把它当作局部数据来用;
- Prop 作为原始数据传入,由子组件处理成其它数据输出。
对这两种情况,正确的应对方式是:
1. 定义一个局部变量,并用 prop 的值初始化它:
props: ['initialCounter'], data: function () { return { counter: this.initialCounter } }
2. 定义一个计算属性,处理 prop 的值并返回:
props: ['size'], computed: { normalizedSize: function () { return this.size.trim().toLowerCase() } }
注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。
Prop 验证
我们可以为组件的 prop 指定验证规则。如果传入的数据不符合要求,Vue 会发出警告。这对于开发给他人使用的组件非常有用。
要指定验证规则,需要用对象的形式来定义 prop,而不能用字符串数组:
Vue.component('example', { props: { // 基础类型检测 (`null` 指允许任何类型) 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 value > 10 } } } })
type
可以是下面原生构造器:
- String
- Number
- Boolean
- Function
- Object
- Array
- Symbol
type
也可以是一个自定义构造器函数,使用instanceof
检测。
当 prop 验证失败,Vue 会抛出警告 (如果使用的是开发版本)。注意 prop 会在组件实例创建之前进行校验,所以在default
或validator
函数里,诸如data
、computed
或methods
等实例属性还无法使用。