建议学习时长： 45分钟
学习方式：了解
学习目标
- 知道如何创建组件。
- 知道如何向组件传值。
- 知道如何处理组件触发的事件。
详细介绍
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。
通读组件的介绍。
组件通信
父组件传递数据给子组件
父组件使用 Prop 传递数据给子组件。
<child-component :prop1="父组件的数据1" :prop2="父组件的数据2"></child-component>
子组件只接收在子组件定义的 props的值。通过 this.prop名称 获得父组件传数据。
// 子组件
Vue.component('child-component', {
props: ['prop1', 'prop2'], // 定义接收哪些 props
template: '<div>{{prop1 + prop2}}</div>',
...
}
父组件调用子组件属性或方法
给要调用的子组件起个名字。将名字设置为子组件 rel 属性的值。
<!-- 子组件。 ref的值是组件引用的名称 -->
<child-component ref="aName"></child-component>
父组件中通过 $refs.组件名 来获得子组件，也就可以调用子组件的属性和方法了。
var child = this.$refs.aName
child.属性
child.方法()
父组件通过 $children 可以获得所有直接子组件（父组件的子组件的子组件不是直接子组件）。需要注意 $children 并不保证顺序，也不是响应式的。
Vue 在 V2.1.0 版本后增加了的 Scoped Slots 的特性。该特性支持在子组件的 slot 中用子组件的数据。用法是：子组件在 slot 上定义传给父组件的数据，父组件通过 scope 属性来拿子组件数据。如
<!-- 子组件 -->
<slot :describe="describe"></slot>
<!-- 父组件 -->
<child-component >
<template scope="childScope">
子元素传给父组件的数据：{{childScope.describe}}
</template>
</child-component>
详情见这里。
子组件传递数据给父组件
子组件通过事件传递父组件传数据。子组件通过$emit(eventName)触发事件，父组件通过$on(eventName)监听事件。
<child-component @somesth-happen="handlerHappen"></child-component>
somesth-happen 是事件名称，handlerHappen 是触发后，父组件的处理函数。
子组件调用父组件属性或方法
子组件通过 $parent 获得父组件，通过 $root 获得最上层的组件。
