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

组件（ Component ）是 Vue.js 最核心的功能，也是整个框架设计最精彩的地方，当然也是最难掌握的。
接下来会由浅入深地学习组件的全部内容，并通过几个案例练习熟练使用 Vue 组件。
正式讲解组件前，先看个场景，了解下为什么学习组件？

有人会问：为什么学习组件，作用是什么？接下来看个场景!!

场景举例

产品经理：现在需求升级了，这几个控件还有别的地方要用到。
程序员：没问题，复制粘贴呗。
产品经理：要求输入框要带数据验证，按钮的图标支持自定义
程序员：这样吧，用 JavaScript 封装后一起复制吧。
…等到项目快完结，后期项目交接前两天
产品经理：所有使用输入框的地方，都要改成支持回车键提交。
程序员：好吧，给我一天的时间，加班一个一个加上去!!!。

上面的需求虽然有点变态，但却是业务中很常见的，那就是一些控件、 JavaScript 功能的复用。

没错， 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解析限制

问题

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

解析 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 这样根实例特有的选项。

以下是代码的练习：

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>demo</title><style type="text/css">.app{width: 200px;height: 50px;border: 1px solid black;margin: 10px;line-height: 50px;text-align: center;}[v-cloak]{display: none;}</style></head><body><div id="app" v-cloak><div @click="changes">{{counds}}</div><!-- 把全局组件添加渲染到HTML当中 --><my-component></my-component><my-component></my-component><my-component></my-component><my-component></my-component><my-component></my-component><my-components></my-components><my-components></my-components><my-components></my-components><my-components></my-components><my-components></my-components><my-components></my-components></div></body>
</html>
<script src="../vue10.9练习/js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">/* 注册全局组件 */Vue.component('my-component',{/* 添加全局组件内容 */template:`<div class="app" @click="message++">我是组件{{message}}</div>`,data:function(){return {message: 0,};}})var app = new Vue({el:'#app',data:{counds:123},components:{'my-components':{template:'<div class="app" @click="count++">我是局部组件{{count}}</div>',data:function(){return {count: 0,};}}},methods:{changes(){this.counds++;console.log(this.counds);}}})
</script>

如有问题或者疑问请留言联系小编！！！请多多指教！！！

感谢来访！！！！

学习VUE第七天课程（VUE之组件（基础、分类、命名））相关推荐

【Vue.js 牛刀小试】：第九章 - 组件基础再探（data、props）
系列目录地址一.基础知识概览第一章 - 一些基础概念(posted at 2018-10-31) 第二章 - 常见的指令的使用(posted at 2018-11-01) 第三章 - 事件修饰符的 ...
java学习笔记-第七章：面向对象编程（基础部分）
第七章:面向对象编程(基础部分) 总体内容类与对象引出类与对象类与对象概述类与对象的关系示意图属性概念及其细节类与对象快速入门案例对象内存布局类与对象内存分配机制引申:java内存的 ...
Vue（七）：Vue项目兼容IE11（解决第三方依赖打包后IE报错问题）
写在开头不建议使用IE win7 XP 等微软已经放弃支持的产品不建议用户过着原始人的生活创建项目 node版本 vue版本 - 安装所需打包直接打包,将打包后的文件夹放到vscode中,使 ...
微信小程序学习笔记（七）----简单文章推荐列表和分类图标的实现
想要实现一个顶部是几篇纯文字的推荐文章,推荐文章下面是四个分类图标,具体实现出来是这个样子的,比较简单: 首先先来找一下素材,这几个图标是我在阿里巴巴图标库下载的,这里是下载地址: http://ww ...
Vue学习-路由（七）
效果: 路由 router-link标签路由路径,to代表路由路径,传参方式跟a链接相同(通过{{$route.query.userName}}取值),而路由路径对应的是组件 router-vie ...
Vue2学习笔记1 - win10下安装vue开发环境
操作系统为Win10_x64 1.安装NodeJs Vue的安装依赖NodeJs,所以需要先安装NodeJs,去NodeJs官网(http://nodejs.cn/download/)下载对应系统的n ...
Vue第七章：项目环境配置及单文件组件 vue脚手
第七章:项目环境配置及单文件组件 vue脚手架回顾: 组件之间的通信父传子:正向传递 vue允许自动触发 props 1.先在子组件中定义期待的属性名和类型 2.在父组件中调用子组件 ...
视频教程-Vue-cli3.x从入门到项目实战视频课程-Vue
Vue-cli3.x从入门到项目实战视频课程北京八维研修学院技术工程师,5年大型项目实战开发经验,3年授课经验. 孟宪杰 ¥68.00 立即订阅扫码下载「CSDN程序员学院APP」,1000+技术 ...
视频教程-uniapp开发仿阿里飞猪旅游微信小程序，vue中高级课程-Vue
uniapp开发仿阿里飞猪旅游微信小程序,vue中高级课程五年互联网实战开发经验,全栈工程师,熟悉主流前端开发技术,js,vue等,后端技术方向在python,node,曾先后就职于阿里云,阿里影业 ...

学习VUE第七天课程（VUE之组件（基础、分类、命名））