特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
通过上一节中的学习,咱们了解了在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
组件的模板:
<template id="child">
<div class="child">
<h3>子组件child数据</h3>
<ul>
<li>
<label>姓名</label>
<span>{{ myName }}</span>
</li>
<li>
<label>年龄</label>
<span>{{ myAge }}</span>
如需转载,烦请注明出处:https://www.w3cplus.com/vue/component-data-and-props-part1.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!