Vue 2.0学习笔记:组件数据传递

特别声明:为感谢社区广大朋友对小站的支持,自2019年10月1日至2019年11月11日开通年费VIP通道,年费价格为 ¥299.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

通过上一节中的学习,咱们了解了在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>
  
剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/vue/component-data-and-props-part1.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部