[DAY11]跟 Vue.js 认识的30天 - Vue 的模组注册(`component`)

模组的命名

一个模组的命名关系到我们是否能快速地知道这个模组的功能是甚麽，同时可以避免跟现有的 HTML 标签相冲突。

在Vue.js - 风格指南中， component 有一个重要的命名规则 - Multi-word component names ，指的是模组的命名需要由多个单字组合而成，这是为了避免跟现有的 HTML 标签产生冲突(现有的 HTML 标签都是一个单字)。

命名方法有2种：

使用 kebab-case (短横线分隔)：如 my-component-name、todo-item、cart-item 等。
使用 PascalCase (首字母大写)： MyComponentName、TodoItem、CartItem 等。

必须注意的是在 HTML 时，标签名一定要是 kebab-case (短横线分隔)模式，例如： <my-component-name></my-component-name> 、 <todo-item></todo-item>。

更多命名的规则请参考Vue.js - 风格指南。

模组的注册

全域注册

在上一篇文章中所介绍的模组都是用全域注册。没错，就是使用 Vue.component('模组名',{...}) ，模组全域注册的目的是让其他的模组都能使用它。

模组的全域注册

Vue.component('global-component-a',{
  props:['status'],
  template: `<p>我是一个全域的模组A</p>`,
  data(){
    return {
      //资料
    },
    methods:{
      //方法
    },
    //生命周期钩子
  }
})
Vue.component('global-component-b',{
  //可以直接使用<global-component-a>，而无须再次注册
  template:`<div>
  <p>我是一个全域的模组B</p>
  <global-component-a></global-component-a>
  </div>`
  //options
})
Vue.component('global-component-c',{
    template:`<p>我是一个全域的模组C</p>`
  //options
})

全域注册模组的使用

<div id="vm">
  <global-component-a></global-component-a>
  <global-component-b></global-component-b>
  <global-component-c></global-component-c>
</div>

通过上方可知，只要是全域的模组，其他的模组都可以直接使用而不用再次注册。

在 Vue 文件中有提到

Remember that global registration must take place before the root Vue instance is created (with new Vue).
全域模组注册必须要在根 Vue 实例创建前。(根 Vue 实例就是用 new Vue 创建出来的那个)。

区域注册

模组的区域注册*

const LocalComponentA = {
  template:`<p>我是一个区域的模组A</p>`
  }
const LocalComponentB = {
  // 将区域模组LocalComponentA注册到要使用他的LocalComponentB实例中
  components:{ LocalComponentA },
  template:`<div>
  <p>我是一个区域的模组B</p>
  <local-component-a></local-component-a>
  </div>` 
  }
const LocalComponentC = {
  // 将区域模组LocalComponentB注册到要使用他的LocalComponentC实例中
  components:{ LocalComponentB },
  template:`<div>
  <p>我是一个区域的模组C</p>
  <local-component-b></local-component-b>
  </div>`
  }

const vm = new Vue({
  el: "#vm",
  // 将区域模组注册到要使用他们的实例中
  components:{
    // LocalComponentA
    LocalComponentB,
    LocalComponentC
  }
})

区域注册模组的使用

<div id="vm">
  <local-component-a></local-component-a>
  <local-component-b></local-component-b>
  <local-component-c></local-component-c>
</div>

这里有几个需要注意的地方：

模组区域注册必须先宣告赋值後才能使用，像是不能在 LocalComponentA 中注册使用 LocalComponentB ，因为 LocalComponentB 的宣告赋值是在 LocalComponentA 之後的。
要使用区域模组一定要先注册，像是在 LocalComponentB 中要使用 LocalComponentA ，就必须在 LocalComponentB 的 options 中加入 components:{LocalComponentA:LocalComponentA} ，使用 ES6 语法可写成 components:{LocalComponentA}，这时在 LocalComponentB 中才可以使用 LocalComponentA 。