vue组件中使用props传递数据的实例详解
前端之家收集整理的这篇文章主要介绍了
vue组件中使用props传递数据的实例详解,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_301_0@在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递。父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息。看看它们是怎么工作的。
<p style="text-align: center">

@H_
301_0@
@H_
301_0@组件不仅仅是要把模板的
内容进行复用,更重要的是组件间要进行通信。
@H_
3010@在组件中,使用选项props 来声明需要从父级接收的数据, props 的值可以是两种, 一种是字符串数组,一种是对象。
@H301_0@
1.1 字符串数组:
<div class="jb51code">
<pre class="brush:js;">
<div id="app4">
<my-component4 message="数据来自父组件">
Vue.component('my-component4',{
props: ['message'],template: '
{{message}}
'
});
var app4 = new Vue({
el: '#app4'
});
@H_
301_0@渲染后的结果为:
@H_
301_0@props 中声明的数据与组件data
函数return 的数据主要区别就是props 的来自父级,而data 中的是组件自己的数据,作用域是组件本身,这两种数据都可以在模板template 及计算
属性computed和
方法methods 中使用。
@H_
301_0@上例的数据message 就是通过props 从父级传递过来的,在组件的
自定义标签上直接写该props 的
名称,如果要传递多个数据,在props 数组中
添加项即可。
@H_
301_0@有时候,传递的数据并不是直接写死的,而是来自父级的动态数据,这时可以使用指令v -bind来动态绑定props 的值,当父组件的数据变化时,也会传递给子组件。
Vue.component('my-component5',{
props: ['myText'],template: '
{{myText}}
'
});
var app5 = new Vue({
el: '#app5',data: {
text: '动态传递父组件数据'
}
});
@H_
301_0@注意的几个点:
@H_
301_0@1.如果你要直接传递数字、布尔值、数组、对象,而且不使用v-bind ,传递的仅仅是字符串。

@H_
301_0@2.如果你想把一个对象的所有
属性作为 prop 进行传递,可以使用不带任何参数的 v-bind (即用 v-bind 而不是 v-bind:prop-name)。例如,已知一个 todo 对象:

@H_
301_0@1.2 对象:
@H_
301_0@当prop 需要验证时,就需要对象写法。
@H_
301_0@一般当你的组件需要提供给别人使用时,推荐都进行数据验证,比如某个数据必须是数字类型,如果传入字符串,就会在控制台弹出警告。
Vue.component('my-component6',{
props: {
'myText':{
type: Number,//必须是数字类型的
required: true,//必须传值
default: 1 //如果未定义,默认值就是1
}
},template: '
{{myText}}
'
});
var app6 = new Vue({
el: '#app6',data: {
number: 1
}
});
@H_
301_0@验证的type 类型可以是:
@H_
301_0@• String
• Number
• Boolean
• Object
• Array
• Function
@H_
301_0@type 也可以是一个
自定义构造器,使用instanceof 检测。
@H_
301_0@当prop 验证失败时,在开发版本下会在控制台抛出一条警告。
@H_
301_0@
二、单向数据流
@H_
301_0@Vue 2.x 与Vue l.x 比较大的一个改变就是, Vue2.x 通过props 传递数据是单向的了, 也就是父组件数据变化时会传递给子组件,但是反过来不行。
@H_
301_0@业务中会经常遇到两种需要改变prop 的情况,
@H_
301_0@2.1 一种是父组件传递初始值进来,子组件将它作为初始值保存起来,在自己的作用域下可以随意使用和
修改。(Prop 作为初始值传入后,子组件想把它当作局部数据来用;)
@H_
301_0@这种情况可以在组件data 内再声明一个数据,引用父组件的prop ,示例
代码如下:
Vue.component('my-component7',{
props: ['initCount'],template: '
{{count}}
',data: function(){
return {
count: this.initCount
}
}
});
var app7 = new Vue({
el: '#app7'
});
',computed: {
style: function(){
return {
width: this.width+'px'
}
}
}
});
var app8 = new Vue({
el: '#app8'
});