今天我们来介绍一下组件是什么，它的作用又是什么？

 

　　组件（ Component ）是 Vue.js 最核心的功能，也是整个框架设计最精彩的地方，当然也是最难掌握的。

 

　　下面我们通过案例来进行讲解

 

　　上图呢是一个很常见的聊天界面，有些标准的控件，输入框，发送按钮，还有关闭按钮等。

 

　　大家也知道，在真正的实战项目中，我们有时候可能会遇到这种问题，产品经理要求我们对完成的项目进行更改时我们可能要把整套网站中所有的部分去进行修改，在之前呢，我们都是一个一个去修改，现在我们可以用 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） 的模板中。

 

　　全局注册有时是不够理想，例如即便你已经不再使用一个组件了，它仍然会被包含在最终的构建结果中，影响性能。

 

　　注意：局部组件只有在当前实例作用域下有效

 

　　组件注册-局部

 

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

 

　　组件嵌套

 

　　组件也可以嵌套其他组件

 

　　全局VS局部

 

　　（1）注册引用步骤

 

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

 

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

 

　　（2）作用域

 

　　全局组件：全局都可以直接引用

 

　　局部组件：只有在当前实例作用域下有效

 

　　HTML文档限制||DOM解析限制

 

　　Vue组件模板在某些情况下会受到 HTML 的限制，比如

 

　　内规定只允许是、

 

　　、等表格元素，所以内直接使用组件是无效的。

 

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