Vue中的组件类似于angular中的指令（directive），除了基本的使用方式和效果外，其中的设计思路也能看出一些共同点：比如显示方法，又比如Vue中的Slot（插槽）和Angular的ng-tranclude，显然在Angular的基础上，Vue设计者希望有更直接，更简单的用户体验。以下仅介绍Vue的组件数据传递。

使用组件，目的一般就是提高代码复用率，增强模块化。虽然仅仅把header/footer提取出来，做成一个模板这样的使用情形还是很多，但是也有很多情形下，要使用到数据传递，对此，Vue主要提供了两种方式，prop和作用域插槽。

首先要说明，不同于Vue全局的数据传递，组件实例的数据作用域是孤立的，这里的孤立并不仅仅指在组件内独立，而且是指上下层之间的数据隔离，即不能在子组件的模板（template）内直接引用父组件的数据。如果要把数据从父组件传递到子组件，可以使用props属性。这是父组件用来传递数据的一个自定义属性。子组件需要显式地用props选项声明 “prop”，即用props：['msg','attr']这种格式。

使用属性（prop）传递数据

静态prop

静态属性的使用方法最简单，可以从它看出来props的使用方法，如下：

模板定义

Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 一样，prop 可以用在模板内
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: '<span>{{ message }}</span>'
})

组件使用

<child message="hello!"></child>

在父模板中，用message显示的传递了一个静态字符串“hello！”进去，通过props声明之后，即可在子组件中使用message这个变量。

静态属性很简单，在实际使用中，如果不想定义过多的子组件，或者子组件间的差异比较小，可以用这个方法显式地区分不同显示内容，如content-type="A/B/C"。注意一点：如模板中使用content-type这样的分隔符命名方式，默认在使用vue的js中也可以使用驼峰命名转换而来的变量格式contentType。

动态prop

类似于用v-bind可以绑定HTML特性到一个表达式，也可以用v-bind将父组件的数据动态绑定到props所声明的值中。这样，每当父组件的数据变化时，该变化也会传导给子组件，该变化是单向的，不会反向传递（单向数据流）：

<div>
<input v-model="parentMsg">
<br>
<child v-bind:my-message="parentMsg"></child>
</div>

其中parentMsg为父组件的数据，这里不能使用子组件的属性（父组件模版不应该知道子组件的状态）。

单向数据流

当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。

另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部手动改变prop。

作用域插槽传递数据

在slot中，也是可以传递数据的，需要使用到作用域插槽（2.1.0新增），并需要使用有属性scope的template元素，来标明它是作用域插槽模版。scope命名一个临时变量，接收从子组件传递的prop对象：

组件模版

<div class="child">
<slot msg="hello from child"></slot>
</div>

父组件模版

<child>
<template scope="props">
<span>{{props.msg}}</span>
</template>
</child>

渲染结果

<div class="child">
<span>hello from child</span>
</div>