通过上一节中的学习，咱们了解了在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>
            </li>
        </ul>
    </div>
</template>

将父组件parent的data通过已定义好的props属性传递给子组件：

<div id="app">
    <child :my-name="name" :my-age="age"></child>
</div>

给上面的示例，添加一点CSS，最终看到的效果如下：

注意：由于HTML特性不区分大小写，在子组件定义prop时，使用了驼峰式大小写（camelCase）命名法。驼峰式大小写的prop用于特性时，需要转为短横线隔开（kebab-case）。例如，在prop中定义的myName，在用作特性时需要转换为my-name。

用下图简单的剖析一下父组件parent是如何将数据传给子组件child，或许这样对于初学者更易于理解：

在父组件使用子组件时，通过以下语法将数据传递给子组件：

&lt