通过上一节中的学习,咱们了解了在Vue中怎么创建组件和使用组件。在项目中使用组件,目的一般就是提高代码复用率,增强模块化,从而降低开发成本。在文章结尾处,我们提到了Vue中组合组件,就是A组件中包含了B组件。而组件与组件之间的相互使用避免不了数据之间的传递。那么Vue中组件的数据是如何传递的呢?这就是这一节将要了解和学习的内容。
首先要说明,组件数据传递不同于Vue全局的数据传递,组件实例的数据作用域名是孤立的,这里的孤立并不仅仅在组件内独立,而且是指上下层之间的数据隔离,即不能在子组件的模板内直接引用父组件的数据。如果要把数据从父组件传递到子组件,就需要使用props属性。这是父组件用来传递数据的一个自定义属性。也就是说,如果要彻底了解清楚Vue组件的数据传递,就很有必要了解清楚props属性。
组件数据流向
在Vue的官方文档中提到,在Vue中,父子组件的关系总结为:prop向下传递,事件向上传递。父组件通过prop给子组件下发数据,子组件通过事件给父组件发送消息。如下图所示:
常把这种数据流称之为单向数据流。prop是单向绑定的:当父组件的属性变化时,将传给子组件,但是反过来不会。这是为了防止子组件无意间修改了父组件的状态,来避免应用的数据流变得难以理解。
另外,每次父组件更新时,子组件的所有prop都会更新为最新值。这意味着你不应该在子组件内部改变prop。如果你这么做了,Vue会在控制台给出警告。用一张更细化的图来表示Vue组件系统中父子组件的数据流动:
使用props向子组件传递数据,首先要在子组件中定义子组件能接受的props,然后在父组件中子组件的自定义元素上将数据传递给它。
props的使用
前面提到过了,组件实例的作用域是孤立的。父组件需要通过props把数据传给子组件。要真正了解其中的原委,就很有必要了解清楚props的使用。那么我们从一些简单的示例开始吧。
props基础示例
首先来创建一个子组件child,并且在Vue的实例中定义了data选项。
let parent = new Vue({
el: '#app',
data () {
return {
name: 'w3cplus',
age: 7
}
},
components: {
'child': {
template: '#child',
props: ['myName', 'myAge']
}
}
})
这里直接把Vue实例parent当作组件child的父组件。如果我们想要使用父组件的数据,则必须先在子组件中定义props,即:props:['myName', 'myAge']。
接下来定义child组件的模板:
子组件child数据
姓名
{{ myName }}
年龄
{{ myAge }}