使用组件
注册
我们可以通过以下方式创建一个 Vue 实例：
new Vue({
el: "#some-element",
// 选项
})
要注册一个全局组件，你可以使用 Vue.component(tagName, options)。 例如：
Vue.component("my-component", {
// 选项
})
组件在注册之后，便可以在父实例的模块中以自定义元素 <my-component></my-component> 的形式使用。要确保在初始化根实例 之前 注册了组件：
<div id="example">
<my-component></my-component>
</div>
// 注册
Vue.component("my-component", {
template: "<div>A custom component!</div>"
})
// 创建根实例
new Vue({
el: "#example"
})
完整代码示例：
<div id="example"> <my-component></my-component> </div> <script type="text/javascript"> // 注册 Vue.component("my-component", { template: "<div>A custom component!</div>" }) // 创建根实例 new Vue({ el: "#example" }) </script>渲染为：
<div id="example"> <div>A custom component!</div> </div>效果如图：
局部注册
不必在全局注册每个组件。通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用：
var Child = {
template: "<div>A custom component!</div>"
}
new Vue({
// ...
components: {
// <my-component> 将只在父模板可用
"my-component": Child
}
})
完整代码示例：
<script type="text/javascript"> new Vue({ el:"#example", components: { "my-component":{ template: "<div>A custom component!</div>" } } }) </script>这种封装也适用于其它可注册的 Vue 功能，如指令。
DOM模板解析说明
当使用 DOM 作为模版时（例如，将 el 选项挂载到一个已存在的元素上）, 你会受到 HTML 的一些限制，因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模版内容。尤其像这些元素
<ul>，<ol>，<table>，<select>限制了能被它包裹的元素， 而一些像 这样的元素只能出现在某些其它元素内部。
在自定义组件中使用这些受限制的元素时会导致一些问题，例如：
<table>
<my-row>...</my-row>
</table>
自定义组件 <my-row> 被认为是无效的内容，因此在渲染的时候会导致错误。变通的方案是使用特殊的 is 属性：
<table>
<tr is="my-row"></tr>
</table>
完整代码示例：
<div id="app"> <table border="1" cellpadding="5" cellspacing="0"> <my-row></my-row> <tr is="my-row"></tr> </table> </div> <script type="text/javascript"> new Vue({ el:"#app", data:{ message:"前端研习社" }, components:{ myRow:{ template:"<tr><td>123456</td></tr>" }
}
});
</script>
应当注意，如果您使用来自以下来源之一的字符串模板，这些限制将不适用：
- <script type="text/x-template">
- JavaScript内联模版字符串
- vue 组件
因此，有必要的话请使用字符串模版。
### data必须是函数
通过Vue构造器传入的各种选项大多数都可以在组件里用。 data 是一个例外，它必须是函数。 实际上，如果你这么做：
Vue.component("my-component", {
template: "{{ message }}",
data: {
message: "hello"
}
})
那么 Vue 会停止，并在控制台发出警告，告诉你在组件中 data 必须是一个函数。理解这种规则的存在意义很有帮助，让我们假设用如下方式来绕开Vue的警告：
var data = { counter: 0 }
Vue.component("simple-counter", {
template: "{{ counter }}",
// 技术上 data 的确是一个函数了，因此 Vue 不会警告，
// 但是我们返回给每个组件的实例的却引用了同一个data对象
data: function () {
return data
}
})
new Vue({
el: "#example-2"
})
>[info] 完整代码示例：
<div id="example-2">
<simple-counter></simple-counter>
<simple-counter></simple-counter>
<simple-counter></simple-counter>
</div>
<script type="text/javascript">
var data = { counter: 0 }
Vue.component("simple-counter", {
template: "<button v-on:click="counter += 1">{{ counter }}</button>",
// 技术上 data 的确是一个函数了，因此 Vue 不会警告，
// 但是我们返回给每个组件的实例的却引用了同一个data对象
// data: {
// message: "hello"
// }
data: function () {
return data
}
})
new Vue({
el: "#example-2"
})
</script>
演示效果如图：
由于这三个组件共享了同一个 data ， 因此增加一个 counter 会影响所有组件！这不对。我们可以通过为每个组件返回全新的 data 对象来解决这个问题：
data: function () {
return {
counter: 0
}
}
现在每个 counter 都有它自己内部的状态了：
>[info] 完整代码示例：
<div id="example-2">
<simple-counter></simple-counter>
<simple-counter></simple-counter>
<simple-counter></simple-counter>
</div>
<script type="text/javascript">
var data = { counter: 0 }
Vue.component("simple-counter", {
template: "<button v-on:click="counter += 1">{{ counter }}</button>",
// 技术上 data 的确是一个函数了，因此 Vue 不会警告，
// 但是我们返回给每个组件的实例的却引用了同一个data对象
// data: {
// message: "hello"
// }
// data: function () {
// return data
// }
data: function () {
return {
counter: 0
}
}
})
new Vue({
el: "#example-2"
})
</script>
演示效果如图：
### 构成组件
组件意味着协同工作，通常父子组件会是这样的关系：组件 A 在它的模版中使用了组件 B 。它们之间必然需要相互通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。然而，在一个良好定义的接口中尽可能将父子组件解耦是很重要的。这保证了每个组件可以在相对隔离的环境中书写和理解，也大幅提高了组件的可维护性和可重用性。
在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。看看它们是怎么工作的。
