组件注册和组件使用的注意事项

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

组件是可复用的 Vue 实例，顾名思义，组件可以提高代码的复用性。

组件注册

全局注册

Vue.component('组件名'，options)

  <div id="app">
    <!-- 使用组件   -->
    <my-first-component></my-first-component>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    //  全局注册一个名字为 'my-first-component' 的组件
    Vue.component('my-first-component',{
      data: function(){ // data必须是函数
        return {
          count: 0
        }
      },
      template: '<div>我是组件的内容</div>' 
      // template会替代html 中的 ‘<my-first-component></my-first-component>’
    });
     let app = new Vue({
      el: '#app'
    })
  </script>

全局注册的优点在于所有的Vue实例都可以用，缺点在于权限太大，容错率降低（类似于JavaScript中的全局变量和局部变量）。

局部注册

  <div id="app">
    <!-- 使用组件   -->
    <my-second-component></my-second-component>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let componentB = {
      template: '<div>我是一个局部组件</div>',
      data: function(){
        return { }
      }
    }
     let app = new Vue({
      el: '#app',
      components: {
        'my-second-component': componentB
      }
     //  局部注册一个名字为 'my-second-component' 的组件
    })
  </script>

解析DOM模板的注意事项

vue组件的模板在某些情况下会受到html标签的限制，详细的内容可以查看文档中对于 解析 DOM 模板时的注意事项 的解释。

比如 <table> 中只能还有 <tr> , <td> 这些元素，所以直接在table中使用组件是无效的，此时可以使用is属性来挂载组件

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

---

组件使用的注意事项

组件命名

有多个单词时，推荐 使用 kebab-case (短横线分隔命名) ，字母全小写且必须包含一个连字符。

template

template中的内容必须被一个DOM元素包裹 ，也可以嵌套（每个组件必须只有一个根元素）。

下面这两种都是错误的写法：

template: '我是组件内容'
template: '<div>我是组件内容一</div><div>我是其他内容一</div>'

正确的写法应该是这样：

template: '<div>我是一个局部组件</div>'
//  或者
template: '<div>我是一个局部组件 <p>实在不知道写什么</p></div>'

data必须是一个函数

一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝

  <div id="app">
    <my-component></my-component>
    <my-component></my-component>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let component = {
      template: '<button v-on:click= "count++"> 点击了{{ count }}次</button>',
      data: function(){
        return {
        count: 0
        }
      }
    }
     let app = new Vue({
      el: '#app',
      components: {
        'my-component': component
      }
     //  局部注册一个名字为 'my-component' 的组件

    })
  </script>