数据下发
组件实例的作用域是相互独立的,父、子组件之间无法进行数据的共享。
如果想在子组件模板中使用父组件的数据,可以通过Prop将父组件的数据下发到子组件。子组件用props
选项声明它预期的数据。
为了传递数据,父组件必须先在子组件自定义标签的特性上绑定数据,绑定的值分两种情况解析:
- 字面量
prop="value"
- 表达式(动态绑定)
v-bind:prop="expression"
- 表达式特例
v-bind="Object"
new Vue({
el: '#app-1',
data: {
parentMsg: 'root\'s dynamic data',
parentObj: {
text:'hello vue!',
isShow: true
},
},
components: {
'component-1': {
props: ['expectMsg','expectDynamicMsg','expectObj','text','isShow'],
template: '\
<div>\
<p>{{expectMsg}}</p>\
<p>{{expectDynamicMsg}}</p>\
<p v-show="expectObj.isShow">{{expectObj.text}}</p>\
<p v-show="isShow">{{text}}</p>\
</div>'
}
<div id="app-1">
<!-- 字面量绑定、动态绑定、动态绑定一个对象、动态绑定特例 -->
<component-1 expect-msg="static data"
v-bind:expect-dynamic-msg="parentMsg"
v-bind:expect-obj="parentObj"
v-bind="parentObj">
</component-1>
</div>
这里分别作了几种绑定的示例:
- 把字符串
"static data"
绑定到子组件的props
的expectMsg
上 - 把父组件属性
parentMsg
动态绑定到子组件的expectDynamicMsg
特性上 - 把父组件中的一个对象
parentObj
动态绑定到子组件的expectObj
特性上 - 把父组件中的
parentObj
对象的属性text、isShow
绑定到子组件的text
和isShow
特性上
注意:要下发一个数字给子组件不能使用字面量绑定,字面量下发的都是字符串。因此需要动态绑定
<component v-bind:some-number="1">
Prop验证
当要对下发数据做验证或在无数据时设置默认值,子组件选项props
就需要使用一个对象替换数组。
简单的情况:
props:{
someProp:String
}
下发数据必须是一个字符串
复杂点可以设置默认值与验证器,如:
new Vue({
el: '#app-2',
data:{
message:{
title:'prop验证',
text:'父组件数据'
}
},
components: {
'component-2': {
props: {
propObj:{
type:Object,
//下发对象的title属性必须是个字符串
validator:function(value){
return typeof value.title === "string"
},
//下发数据为一个数组或对象,设置的默认值必须由一个函数返回
default:function(){
return {title:'prop验证',text:'数组/对象的默认值应当由一个工厂函数返回'}
}
}
},
template: '<div><h5>{{propObj.title}}</h5><p>{{propObj.text}}</p></div>'
}
}
})
<div id="app-2">
<component-2 v-bind:prop-obj="message"></component-2>
</div>
type属性也可以是一个函数,使用instanceof
验证。验证在子组件实例创建之前进行,因此验证里的任何函数都无法使用子组件实例属性。
更多类型验证 Prop验证
Prop的单向绑定和双向绑定
下发数据实际上就是完成一个数据绑定的过程,把组件间的特定数据绑定在一起,默认情况下为单向绑定,子组件的数据对于父组件是透明的,而父组件的数据变化则会引发子组件数据的变化。
new Vue({
el: '#app-3',
data: {
content: "please input..."
},
components: {
'component-3': {
props:['txt'],
template:'<div><input v-model="txt"></div>'
}
}
})
<div id="app-3">
<input v-model="content">
<br/>
<component-3 v-bind:txt="content"></component-3>
</div>
父组件通过Prop
下发数据,将父组件属性content
和子组件特性txt
绑定在一起,在第一文本框输入值改变content
的内容,子组件的txt
会跟随变化,显示在第二个文本框中。
如果在子模板第二个文本框输入,修改txt
的值时,父组件控制的第一个文本框内容不会改变。
并在控制台给出警告,说不要修改props
选项中的值,作为代替,可以让prop
的值赋予data
或者computed
属性使用。因此可以像下面这样用data
替代prop
作为一个局部变量。
'component-3': {
props:['txt'],
template:'<div><input v-model="txtData"></div>',
data:function(){
return {txtData:this.txt}
}
}
若只考虑输出不考虑输入,也可以使用计算属性替代
'component-3': {
props: ['txt'],
template: '<div><input v-model="txtComputed"></div>',
computed: {
txtComputed:function() {
return this.txt
}
}
}
非Prop特性
组件的作者却并不总能预见到组件被使用的场景。所以,组件可以接收任意传入的特性,这些特性都会被添加到组件的根元素上,而不需要定义响应的props
。
var vm = new Vue({
el: '#app-4',
components: {
"component-4": {
template: "<button class='btn-sm'>hello vue!</button>"
}
}
});
<div id="app-4">
<component-4 data-title="learn vue" class="btn-info"></component-4>
</div>
渲染结果
<button class="btn-sm btn btn-info" data-title="learn vue">hello vue!</button>
其中data-title
、class
就是非Prop特性。
因为没有在组件中定义props
,因此也无法去引用它们,作用目前不明显。
从渲染结果还可以发现,class
特性的值由子组件模板和父模板定义的特性合并而成,对于class
和style
是这样合并结果。但对于多数组件来说,传递给组件的值会覆盖组件本身设定的值。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。