什么是组件？
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。
使用组件
注册
之前说过，我们可以用 Vue.extend() 创建一个组件构造器：
var MyComponent = Vue.extend({
// 选项...
})
</div>
要把这个构造器用作组件，需要用 `Vue.component(tag, constructor)` **注册** ：
// 全局注册组件，tag 为 my-component
Vue.component('my-component', MyComponent)
</div>
<p class="tip">对于自定义标签名字，Vue.js 不强制要求遵循 W3C 规则（小写，并且包含一个短杠），尽管遵循这个规则比较好。
组件在注册之后，便可以在父实例的模块中以自定义元素 <my-component> 的形式使用。要确保在初始化根实例之前注册了组件：
<div id="example">
<my-component></my-component>
</div>
// 定义
var MyComponent = Vue.extend({
template: '<div>A custom component!</div>'
})
// 注册
Vue.component('my-component', MyComponent)
// 创建根实例
new Vue({
el: '#example'
})
</div>
渲染为：
<div id="example"> <div>A custom component!</div> </div></div>
注意组件的模板替换了自定义元素，自定义元素的作用只是作为一个挂载点。可以用实例选项 replace 决定是否替换。
局部注册
不需要全局注册每个组件。可以让组件只能用在其它组件内，用实例选项 components 注册：
var Child = Vue.extend({ /* ... */ })
var Parent = Vue.extend({
template: '...',
components: {
// <my-component> 只能用在父组件模板内
'my-component': Child
}
})
</div>
这种封装也适用于其它资源，如指令、过滤器和过渡。
注册语法糖
为了让事件更简单，可以直接传入选项对象而不是构造器给 Vue.component() 和 component 选项。Vue.js 在背后自动调用 Vue.extend()：
// 在一个步骤中扩展与注册
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
// 局部注册也可以这么做
var Parent = Vue.extend({
components: {
'my-component': {
template: '<div>A custom component!</div>'
}
}
})
</div>
组件选项问题
传入 Vue 构造器的多数选项也可以用在 Vue.extend() 中，不过有两个特例： data 和 el。试想如果我们简单地把一个对象作为 data 选项传给 Vue.extend()：
var data = { a: 1 }
var MyComponent = Vue.extend({
data: data
})
</div>
这么做的问题是 `MyComponent` 所有的实例将共享同一个 `data` 对象！这基本不是我们想要的，因此我们应当使用一个函数作为 `data` 选项，让这个函数返回一个新对象：
var MyComponent = Vue.extend({
data: function () {
return { a: 1 }
}
})
</div>
同理，`el` 选项用在 `Vue.extend()` 中时也须是一个函数。
模板解析
Vue 的模板是 DOM 模板，使用浏览器原生的解析器而不是自己实现一个。相比字符串模板，DOM 模板有一些好处，但是也有问题，它必须是有效的 HTML 片段。一些 HTML 元素对什么元素可以放在它里面有限制。常见的限制：
•a 不能包含其它的交互元素（如按钮，链接）
•ul 和 ol 只能直接包含 li
•select 只能包含 option 和 optgroup
•table 只能直接包含 thead, tbody, tfoot, tr, caption, col, colgroup
•tr 只能直接包含 th 和 td
在实际中，这些限制会导致意外的结果。尽管在简单的情况下它可能可以工作，但是你不能依赖自定义组件在浏览器验证之前的展开结果。例如 <my-select><option>...</option></my-select> 不是有效的模板，即使 my-select 组件最终展开为 <select>...</select>。
另一个结果是，自定义标签（包括自定义元素和特殊标签，如 <component>、<template>、 <partial> ）不能用在 ul, select, table 等对内部元素有限制的标签内。放在这些元素内部的自定义标签将被提到元素的外面，因而渲染不正确。
对于自定义元素，应当使用 is 特性：
<table> <tr is="my-component"></tr> </table></div>
`` 不能用在 `` 内，这时应使用 ``，`
` 可以有多个 ``：
<table> <tbody v-for="item in items"> <tr>Even row</tr> <tr>Odd row</tr> </tbody> </table></div>
Props
使用 Props 传递数据
组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。
“prop” 是组件数据的一个字段，期望从父组件传下来。子组件需要显式地用 props 选项 声明 props：
Vue.component('child', {
// 声明 props
props: ['msg'],
// prop 可以用在模板内
// 可以用 `this.msg` 设置
template: '<span>{{ msg }}</span>'
})
</div>
然后向它传入一个普通字符串：
<child msg="hello!"></child>
驼峰式vs.横杠式
HTML 特性不区分大小写。名字形式为 camelCase 的 prop 用作特性时，需要转为 kebab-case（短横线隔开）：
Vue.component('child', {
// camelCase in JavaScript
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})
<!-- kebab-case in HTML -->
<child my-message="hello!"></child>
</div>
动态 Props
类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 绑定动态 Props 到父组件的数据。每当父组件的数据变化时，也会传导给子组件：
<div> <input v-model="parentMsg"> <br> <child v-bind:my-message="parentMsg"></child> </div></div>
使用 `v-bind` 的缩写语法通常更简单：
<child :my-message="parentMsg"></child>
字面量语法 vs. 动态语法
初学者常犯的一个错误是使用字面量语法传递数值：
<!-- 传递了一个字符串 "1" -->
<comp some-prop="1"></comp>
因为它是一个字面 prop，它的值以字符串 `”1”` 而不是以实际的数字传下去。如果想传递一个实际的 JavaScript 数字，需要使用动态语法，从而让它的值被当作 JavaScript 表达式计算：
<!-- 传递实际的数字 -->
<comp :some-prop="1"></comp>
Prop 绑定类型
prop 默认是单向绑定：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。不过，也可以使用 .sync 或 .once 绑定修饰符显式地强制双向或单次绑定：
比较语法：
<!-- 默认为单向绑定 --> <child :msg="parentMsg"></child> <!-- 双向绑定 --> <child :msg.sync="parentMsg"></child> <!-- 单次绑定 --> <child :msg.once="parentMsg"></child></div>
双向绑定会把子组件的 msg 属性同步回父组件的 parentMsg 属性。单次绑定在建立之后不会同步之后的变化。
注意如果 prop 是一个对象或数组，是按引用传递。在子组件内修改它会影响父组件的状态，不管是使用哪种绑定类型。
Prop 验证
组件可以为 props 指定验证要求。当组件给其他人使用