VUE之组件（基础、分类、命名）

组件（ Component ）是 Vue.js 最核心的功能，Vue.js的组件就是提高重用性的，让代码可复用。
组件注册
创建 Vue 实例的方法：

组件Component与之类似，需要注册后才可以使用。注册有全局注册和局部注册两种方式！
①全局组件：任何Vue 实例都可以使用
②局部组件：只有在该实例作用域下有效（对比全局与局部变量记忆）
组件注册-全局
语法：

my-component 就是注册的组件自定义标签名称，推荐使用小写加减号分割的形式命名（即kebab-case短横线分隔命名法，此外还有PascalCase首字母大写命名即大驼峰法）。
要在父实例中使用这个组件，必须要在实例创建前注册
之后就可以用 <组件名></组件名>形式来使用组件了。

此时打开页面还是空白的，因为注册的组件没有任何内容，在组件选项中添加 template（模板）就可以显示组件内容了

全局组件注册步骤小结：
①注册组件component并命名
②添加模板template内容
③通过自定义组件名调用组件

template模板语法要求：
template的 DOM 结构必须被一个元素包含， 如果直接写成 “这里是组件的内容”， 不带“

”等根元素是无法渲染的。

组件命名
定义组件名的方式有两种：kebab-case和PascalCase
（1）kebab-case短横线分隔命名
当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用/调用这个自定义元素时使用 kebab-case，例如

（2）PascalCase首字母大写命名即大驼峰
当使用 PascalCase (首字母大写命名) 定义组件，在html文档里引用时必须使用kebab-case短横线分隔命名才生效，否则报错（原理：HTML对大小写不敏感、JS对大小写敏感）

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

由上例可以看出，组件components添加模板component有两种方式
①直接绑定添加

②指向已有模板对象

全局VS局部
全局注册组件通过Vue.component语法，全局注册的组件可以用在任何Vue 根实例 (new Vue) 的模板中。

局部组件也可以同时注册多个，引用时一一对应即可

组件嵌套
组件也可以嵌套其他组件

（1）注册引用步骤
①全局组件：在创建实例前注册，注册后即可直接引用

②局部组件：在components选项内注册

（2）作用域
全局组件：全局都可以直接引用
局部组件：只有在当前实例作用域下有效

HTML文档限制||DOM解析限制
Vue组件模板在某些情况下会受到 HTML 的限制，比如<table>内规定只允许是<tr>、<td>、<th>等表格元素，所以内直接使用组件是无效的

可以使用特殊的is属性来挂载组件。

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

解析 DOM 模板时的注意事项：

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

组件选项-数据选项与复用
JS对象是引用关系，所以如果return出的对象引用了外部的一个对象，那这个对象就是共享的，任何一方修改都会同步，如下所示。
（引用关系，会产生浅拷贝，互相影响）

组件使用了3次，但是点击任意， 3个的按钮的数字都会+1 ，这是因为组件 data引用的是外部的对象。
这肯定不是我们期望的效果，所以接下来给组件返回一个新的data 对象来独立

这样，点击每个按钮就互不影响了，完全达到复用的目的。
当点击按钮时，每个组件都会各自独立维护它的 count。因为每用一次组件，就会有一个它的新实例被创建。

总结
（1）注册位置：全局组件必须在实例化之前注册，局部组件需要在components选项内注册。
（2）作用域：全局组件：全局都可以直接引用；局部组件：只有在当前实例作用域下有效。
（3）HTML文档限制：组件模板在某些情况下会受到 HTML 的限制，使用特殊的is属性来挂载组件。
（4）除了 template 模板选项外，组件中还可以像 Vue 实例那样使用其他的选项，比如 computed、methods 等。但是在使用 data 和实例稍有区别， 组件的data必须是函数，且必须将数据 return出去。
（5）组件复用：可以将组件进行任意次数的复用。
（6）data选项再次强调：组件的data 并不是像原来一样直接提供一个对象，取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
（7）因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

以上就是VUE之组件（基础、分类、命名），如有问题请联系小编！