Vue.js实战学习-组件详解(一)

    组件与复用

     1.组件用法

        组件与创建Vue实例类似，需要注册后才可以使用。注册有全局注册和局部注册两种方式。全局注册后，任何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就可以显示组件内容了，示例代码如下：

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

        渲染后的结果是：

<div id="app">
   <div>这里是组件的内容</div>
</div>

       template的DOM结构必须被一个元素包含，如果直接写成"这里是组件的内容"，不带"<div></div>" 是无法渲染的。

       在Vue实例中，使用components选项可以局部注册组件，注册后的组件只有在该实例作用域下有效。组件中也可以使用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>、<td>、<th>等这些表格元素，所以在<table>内直接使用组件是无效的。这种情况下。可以使用特殊的is属性来挂载组件，示例代码如下：

<div id="app">
   <table>
      <tbody is="my-component"></tbody>
   </table>
</div>
<script>
   Vue.compontent('my-component', {
      template: '<div>这里是组件的内容</div>'
   });
   var app = new Vue ({
      el: '#app'
   })
</script>

       tbody在渲染时，会被替换为组件的内容。常见的限制元素还有<ul>、<ol>、<select>。

       除了template选项外，组件中还可以像Vue实例那样使用其他的选项，比如data、computed、methods等。但是在使用data时，和实例稍有区别，data必须是函数，然后将数据return出去，例如：

<div id="app">
   <my-component></my-component>
</div>
<script>
   Vue.component('my-component', {
      template: '<div>{{ message }}</div>',
      data: function () {
         return {
           message: '组件内容'
        }
      }
   });
   var app = new Vue({
      el: '#app'
   })
</script>