Vue基础之使用props传递数据
1、基本用法组件不仅仅是要把模板的内容进行复用,更重要的是组件间要进行通信。通常父组件的模板中包含子组件,父组件要正向地向子组件传递数据或参数,子组件接收到后根据参数的不同来渲染不同的内容或执行操作。这个正向传递数据的过程就是通过props来实现的。在组件中,使用选项props来声明需要从父级接收的数据,props的值可以是两种,一种是字符串数组,一种是对象,这块先介绍数组的用法。比如我们构造一个
1、基本用法
组件不仅仅是要把模板的内容进行复用,更重要的是组件间要进行通信。通常父组件的模板中包含子组件,父组件要正向地向子组件传递数据或参数,子组件接收到后根据参数的不同来渲染不同的内容或执行操作。这个正向传递数据的过程就是通过props来实现的。在组件中,使用选项props来声明需要从父级接收的数据,props的值可以是两种,一种是字符串数组,一种是对象,这块先介绍数组的用法。比如我们构造一个数组,接收一个来自父级的数据message,并把它在组件模板中渲染,示例代码如下:
<div id="app">
<my-component message="来自父组件的消息"></my-component>
<my-component message="来自父组件的消息1"></my-component>
</div>
<script type="text/javascript">
Vue.component('my-component',{
props:['message'],
template:'<div>{{message}}</div>',
data
});
var vm=new Vue({
el:"#app"
})
</script>
渲染后的结果为:
<div id="app">
<div>来自父组件的消息</div>
<div>来自父组件的消息1</div>
</div>
props中声明的数据与组件data函数return的数据主要区别就是props的来自父级,而data中的是组件自己的数据,作用域是组件本身,这两种数据都可以在模板template及计算属性computed和方法methods中使用。上例的数据message就是通过props从父级传递过来的,在组件的自定义标签上直接写该props的名称,如果要传递多个数据,在props数组中添加项即可。
由于HTML特性不区分大小写,当使用DOM模板时,驼峰命名(camelCase)的props名称要转为短横分隔命名(kebab-case)。
有时候,传递的数据并不是直接写死的,而是来自父级的动态数据,这时可以使用指令v-bind来动态绑定props的值,当父组件的数据变化时,也会传递给子组件。示例代码如下:
<div id="app">
<input type="text" v-model="parentMessage">
<my-component :message="parentMessage"></my-component>
<my-component message="来自父组件的消息"></my-component>
<my-component message="来自父组件的消息1"></my-component>
</div>
<script type="text/javascript">
Vue.component('my-component',{
props:['message'],
template:'<div>{{message}}</div>',
});
var vm=new Vue({
el:"#app",
data:{
parentMessage:""
}
})
</script>
这里用v-model绑定了父级的数据parentMessage,当通过输入框任意输入时,子组件接收到的props。“message”也会实时响应,并更新组件模板。
注意:如果你要直接传递数字、布尔值、数组、对象,而且不使用v-bind,传递的仅仅是字符串,尝试下面的示例来对比:
<div id="app">
<my-component message='[1,2,3]'></my-component>
<my-component :message='[1,2,3]'></my-component>
</div>
<script type="text/javascript">
Vue.component('my-component',{
props:['message'],
template:'<div>{{message.length}}</div>',
});
var vm=new Vue({
el:"#app",
data:{
parentMessage:""
}
})
</script>
可以看到结果没有绑定返回的是7明显是字符串长度。
二、单向数据流
Vue 2.x与Vuel.x比较大的一个改变就是,Vue2.x通过props传递数据是单向的了,也就是父组件数据变化时会传递给子组件,但是反过来不行。而在Vuel.x里提供了.sync修饰符来支持双向绑定。之所以这样设计,是尽可能将父子组件解稿,避免子组件无意中修改了父组件的状态。
业务中会经常遇到两种需要改变prop的情况,一种是父组件传递初始值进来,子组件将它作为初始值保存起来,在自己的作用域下可以随意使用和修改。这种情况可以在组件data内再声明一个数据,引用父组件的prop,示例代码如下:
<div id="app">
<my-component :message='1'></my-component>
</div>
<script type="text/javascript">
Vue.component('my-component',{
props:['message'],
template:'<div>{{count}}</div>',
data:function(){
return{
count:this.message
}
}
});
var vm=new Vue({
el:"#app",
data:{
parentMessage:""
}
})
</script>
组件中声明了数据count,它在组件初始化时会获取来自父组件的initCount,之后就与之无关了,只用维护count,这样就可以避免直接操作initCount。
另一种情况就是prop作为需要被转变的原始值传入。这种情况用计算属性就可以了,示例代码如下:
<div id="app">
<my-component :width='100'></my-component>
</div>
<script type="text/javascript">
Vue.component('my-component',{
props:['width'],
template:'<div :style="style"></div>',
computed:{
style:function(){
return{
width:this.width+'px'
}
}
}
});
var vm=new Vue({
el:"#app",
data:{
parentMessage:""
}
})
</script>
因为用css传递宽度要带单位(px),但是每次都写太麻烦,而且数值计算一般是不带单位的,所以统一在组件内使用计算属性就可以了。
注意,在javascript是引用类型,指向同一个内存空间,所以props是对对象和数组时,在子组件内改变是会影响父组件的。
三、数据验证
我们上面所介绍的props选项的值都是一个数组,一开始也介绍过,除了数组外,还可以是对象,当prop需要验证时,就需要对象写法。
一般当你的组件需要提供给别人使用时,推荐都进行数据验证,比如某个数据必须是数字类型,如果传入字符串,就会在控制台弹出警告。
Vue.component('my-component',{
props: {
//必须是数字类型
propA: Number,
//必须是字符串或数字类型
propB: [String, Number],
//布尔值,如果没有定义,默认值就是true
propC: {
type: Boolean,
default: true }
//数字,而且是必传
propD: {
type: Number,
required: true }
//如果是数组或对象,默认值必须是一个函数来返回
propE: {
type: Array,
default: function () {
return [];
}
}
//自定义一个验证函数
propF: {
validator: function (value) {
return value > 10;
}
}
} ) ,
验证的type类型可以是:
• String
• Number
• Boolean
• Object
• Array
• Function
type也可以是一个自定义构造器,使用instanceof检测。当prop验证失败时,在开发版本下会在控制台抛出一条警告。
更多推荐
所有评论(0)