Vue基础篇-组件注册

1.组件介绍

（a）扩展HTML元素；

（b）封装可复用代码片段；

（c）低耦合，组件和其他代码无冲突；

（d）修改功能时，方便快捷；

（e）便于协同开发，并行开发最后整合；

2.基本写法

步骤一：注册组件    Vue.component( 组件名称 ，配置项 );

步骤二：使用组件    <组件名称></组件名称>

3.全局组件&局部组件

全局组件：一经注册，全部实例的任意位置可用（这个用的还是少，因为毕竟消耗内存，初始化耗时间）。

局部组件：一经注册，只可在当前组件内使用（局部的话，更能知道组件的嵌套，逻辑性会好一些，易于维护）。

//全局组件注册&使用

<div id="app">
    <name></name>
</div>
 
<script>
    //全局注册：这个注册一定是在实例化之前
    Vue.component('name', {
      template: '<h1>自定义全局组件!</h1>'
    })
    new Vue({
      el: '#app'
    })
</script>

//局部组件注册&使用

<div id="app">
    <name></name>
</div>
 
<script>
    var Child = {
      template: '<h1>自定义局部组件!</h1>'
    }
    new Vue({
      el: '#app',
      //局部注册：1.最后有个‘s’；2.标签<name> 将只在父模板可用
      components: {
        'name': Child
      }
    })
</script>

4.组件备注

（a）组件data必须是一个函数

相同组件重复使用，其每一个组件都是一个实例的创建，都有自己需要维护的作用域和执行环境，为了维护这一份被返回对象的独立拷贝，data数据层需要定义为一个函数，以支持单独管理当前实例化的组件。

data: function () {
  return {
    count: 0
  }
}

（b）要在初始化根实例之前注册组件

（c）全局注册是component，局部注册是components。一个“s”的区别

（d）template为具体组件内容，大多时候不会直接写死，可使用ES6的import导入组件，再使用之（后边会介绍，不急不急）

（e）使用开源组件库时，切记根据说明文档做正确的配置，否则这坑不好填满