vue组件中使用props传递数据的实例详解

vue组件中使用props传递数据的实例详解

在 vue 中，父子组件的关系可以总结为 props向下传递，事件向上传递。父组件通过 props 给子组件下发数据，子组件通过事件给父组件发送消息。看看它们是怎么工作的。

一、基本用法

组件不仅仅是要把模板的内容进行复用，更重要的是组件间要进行通信。

在组件中，使用选项props 来声明需要从父级接收的数据， props 的值可以是两种， 一种是字符串数组，一种是对象。

1.1　字符串数组：

Vue.component('my-component4',{

props: ['message'],

template: '

});

var app4 = new Vue({

el: '#app4oJfdRaMi'

});

渲染后的结果为：

props 中声明的数据与组件data 函数return 的数据主要区别就是props 的来自父级，而data 中的是组件自己的数据，作用域是组件本身，这两种数据都可以在模板template 及计算属性computed和方法methods 中使用。

上例的数据message 就是通过props 从父级传递过来的，在组件的自定义标签上直接写该props 的名称，如果要传递多个数据，在props 数组中添加项即可。

有时候，传递的数据并不是直接写死的，而是来自父级的动态数据，这时可以使用指令v -bind来动态绑定props 的值，当父组件的数据变化时，也会传递给子组件。

Vue.component('my-component5',{

props: ['myText'],

template: '

});

var app5 = new Vue({

el: '#app5',

data: {

text: '动态传递父组件数据'

}

});

注意的几个点：

1.如果你要直接传递数字、布尔值、数组、对象，而且不使用v-bind ，传递的仅仅是字符串。

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

1.2　对象：

当prop 需要验证时，就需要对象写法。

一般当你的组件需要提供给别人使用时，推荐都进行数据验证，比如某个数据必须是数字类型，如果传入字符串，就会在控制台弹出警告。

Vue.component('my-component6',{

props: {

'myText':{

type: Number, //必须是数字类型的

required: true, //必须传值

default: 1 //如果未定义，默认值就是1

}

},

template: '

});

var app6 = new Vue({

el: '#app6',

data: {

number: 1

}

});

验证的type 类型可

以是：

• String

• Number

• Boolean

• Object

• Array

• Function

type 也可以是一个自定义构造器，使用instanceof 检测。

当prop 验证失败时，在开发版本下会在控制台抛出一条警告。

二、单向数据流

Vue 2.x 与Vue l.x 比较大的一个改变就是， Vue2.x 通过props 传递数据是单向的了， 也就是父组件数据变化时会传递给子组件，但是反过来不行。

业务中会经常遇到两种需要改变prop 的情况，

2.1　一种是父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。（Prop 作为初始值传入后，子组件想把它当作局部数据来用；）

这种情况可以在组件data 内再声明一个数据，引用父组件的prop ，示例代码如下：

Vue.component('my-component7',{

props: ['initCount'],

template: '

data: function(){

return {

count: this.initCount

}

}

});

var app7 = new Vue({

el: '#app7'

});

组件中声明了数据count ， 它在组件初始化时会获取来自父组件的initCount ， 之后就与之无关了，只用维护oJfdRaMic ount ， 这样就可以避免直接操作initCount 。

2.2　prop 作为需要被转变的原始值传入。（Prop 作为原始数据传入，由子组件处理成其它数据输出。）

这种情况用计算属性就可以了， 示例代码如下：

Vue.component('my-component8',{

props: ['width'],

template: '

computed: {

style: function(){

return {

width: this.width+'px'

}

}

}

});

var app8 = new Vue({

el: '#app8'

});

注意在 javascript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。

总结

以上所述是给大家介绍的vue组件中使用props传递数据的实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。