组件

组件(Component)是Vue.js最核心的功能，也是整个框架设计最精彩的地方，当然也是最难掌握的。组件可以扩展HTML元素，封装可重用的代码。为什么使用组件？当然是为了提高代码的重用性；

组件的用法

组件是需要注册才可以使用的，注册有全局注册和局部注册两种方式。全局注册后，任何Vue实例都可以使用，

• 全局注册代码如下：

Vue.component('my-component', {
// 选项
})

// my-component就是注册的组件自定义标签名称，推荐使用小写或加减号分割的形式命名。要在父实例中使用这个组件，必须要在实例创建前注册，之后就可以用<my-component></my-component>的形式来使用组件了。

<div id="app">
    <my-component></my-component>
</div>
<script>
Vue.component('my-component', {
//选项
});
var app = new Vue({
    el: '#app'
})
</script>

此时的页面还是空白的，因为我们注册的组件没有任何内容，在组件选项中添加template就可以显示内容了。此时注意template的DOM结构必须被一个元素包含。

Vue.component('my-component', {
    template: '<div>这里是组件的内容</div>'
});

• 局部注册

局部注册的组件只有在该实例作用域下有效。组件中也可以使用components选项来注册，使组件可以嵌套，示例如下：

<div id="app">
    <my-component></my-component>
</div>
<script>
var child = {
    template: '<div>局部注册组件的内容</div>'
}
var app = new Vue({
    el: '#app',
    components: {
        'my-component': child
    }
})
</script>

Vue组件的模板在某些情况下会受到HTML的限制，比如table标签内只允许使用tr、th等表格元素，所以在table内直接使用组件是无效的。在这种情况下，可以使用特殊的is属性来挂载组件，示例如下：

<table>
    <tbody is="my-component"></tbody>
</table>

tbody在渲染是会被替换为组件的内容，常用的限制元素如 ul、select等同理。