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

深藏阁楼爱情的钟 2023-05-31 02:58 149阅读 0赞

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

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]

### 场景举例 ###

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

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

### 没错， Vue.js的组件就是提高重用性的，让代码可复用，当学习完组件后，上面的问题就可以轻松搞定了，再也不用害怕产品经理的奇随需求。 ###

## 组件注册 ##

#### 回顾下创建 Vue 实例的方法： ####

![在这里插入图片描述][20191022145014292.png]

##### 组件Component与之类似，需要注册后才可以使用。注册有全局注册和局部注册两种方式。 #####

**①全局组件：任何Vue 实例都可以使用  
②局部组件：只有在该实例作用域下有效（对比全局与局部变量记忆）**

## 组件注册-全局 ##

##### 全局注册组件语法： #####

![在这里插入图片描述][20191022145300131.png]

**my-component 就是注册的组件自定义标签名称，推荐使用小写加减号分割的形式命名（即kebab-case短横线分隔命名法，此外还有PascalCase首字母大写命名即大驼峰法）。**

**要在父实例中使用这个组件，必须要在实例创建前注册，之后就可以用<组件名></组件名>形式来使用组件了，示例代码如下**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]

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

**示例代码如下:**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]

## 全局组件注册步骤小结： ##

**①注册组件component并命名  
②添加模板template内容  
③通过自定义组件名调用组件**  
![在这里插入图片描述][20191022145633807.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]

### template模板语法要求： ###

###### template的 DOM 结构必须被一个元素包含， 如果直接写成 “这里是组件的内容”， 不带“  ”等根元素是无法渲染的。 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]

# 组件命名 #

##### 定义组件名的方式有两种：kebab-case和PascalCase #####

**（1）kebab-case短横线分隔命名**  
![在这里插入图片描述][20191022145848117.png]  
**当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用/调用这个自定义元素时使用 kebab-case，例如 。**  
![在这里插入图片描述][20191022145859813.png]  
**（2）PascalCase首字母大写命名即大驼峰**  
![在这里插入图片描述][20191022145919429.png]  
**当使用 PascalCase (首字母大写命名) 定义组件，在html文档里引用时必须使用kebab-case短横线分隔命名才生效，否则报错（原理：HTML对大小写不敏感、JS对大小写敏感）。**

**因此，文档引用时为:**  
![在这里插入图片描述][20191022150000911.png]

# 组件注册-局部 #

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

**组件中也可以使用components 选项来注册组件，使组件可以嵌套。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 6]  
**由上例可以看出，组件components添加模板component有两种方式**  
**①直接绑定添加**  
![在这里插入图片描述][20191022150118617.png]  
**②指向已有模板对象**  
![在这里插入图片描述][20191022150130166.png]

# 全局VS局部 #

**全局注册组件通过Vue.component语法，全局注册的组件可以用在任何Vue 根实例 (new Vue) 的模板中。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 7]  
**全局注册有时是不够理想，例如即便你已经不再使用一个组件了，它仍然会被包含在最终的构建结果中，影响性能。**

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 8]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 9]

## 组件嵌套 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 10]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 11]

## （1）注册引用步骤 ##

**①全局组件：在创建实例前注册，注册后即可直接引用**  
![在这里插入图片描述][20191022150335761.png]  
**②局部组件：在components选项内注册**  
![在这里插入图片描述][20191022150344925.png]  
**（2）作用域  
全局组件：全局都可以直接引用  
局部组件：只有在当前实例作用域下有效**

# 拓展:HTML文档限制||DOM解析限制 #

### 问题 ###

![在这里插入图片描述][20191022150835925.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 12]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 13]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 14]

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

![在这里插入图片描述][2019102215100826.png]

## 组件选项-data数据项 ##

**除了 template 模板选项外，组件中还可以像 Vue 实例那样使用其他的选项，比如 computed、methods 等。  
但是在使用 data 和实例稍有区别， 组件的data必须是函数，且必须将数据 return出去。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 15]

## 组件选项-数据选项与复用 ##

**JS对象是引用关系，所以如果return出的对象引用了外部的一个对象，那这个对象就是共享的，任何一方修改都会同步，如下所示。  
（引用关系，会产生浅拷贝，互相影响）**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 16]  
**组件使用了3次，但是点击任意， 3个的按钮的数字都会+1 ，这是因为组件 data引用的是外部的对象。  
这肯定不是我们期望的效果，所以接下来给组件返回一个新的data 对象来独立**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 17]  
**这样，点击每个按钮就互不影响了，完全达到复用的目的。**  
**当点击按钮时，每个组件都会各自独立维护它的 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>
    			
    			<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>

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

### 感谢来访！！！！ ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]: /images/20230531/72f1337285e142aabc6f457b6c1301eb.png
[20191022145014292.png]: /images/20230531/fdbd740bced044adb4b7c06bfe6ae91b.png
[20191022145300131.png]: /images/20230531/cb388c18d25e4743b15a11c0cbde0844.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]: /images/20230531/0187cec9f0154a7ca279bb779800b7b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]: /images/20230531/d6e48926e1bc40c1bedd430d3d72a64c.png
[20191022145633807.png]: /images/20230531/525d957144ad4880a65122347b0b1bbc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]: /images/20230531/255d60f5f8ce43ca953df234bb67f7a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]: /images/20230531/7821ae3595d340acbd9e50777ddfba91.png
[20191022145848117.png]: /images/20230531/497b196d28084679a0384526678550b9.png
[20191022145859813.png]: /images/20230531/a96cfe9047224f49bacb5ed537220e3c.png
[20191022145919429.png]: /images/20230531/96fe050b7492493888f759ee1a04c9e9.png
[20191022150000911.png]: /images/20230531/b29d1da16cb44a03857e63a08e01fffe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]: /images/20230531/a92a888fd9dd4150ae629d0998c64d95.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 6]: /images/20230531/b65b02c520474e73aefa1f2bab47061e.png
[20191022150118617.png]: /images/20230531/b7b9a78192834725834e6657edd967e7.png
[20191022150130166.png]: /images/20230531/5fa0a07914d64dbc8292422496518b2a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 7]: /images/20230531/256be1398fe543dcaf7bd9600b979159.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 8]: /images/20230531/a1e153e21d184ae5a5924054bd4ed41e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 9]: /images/20230531/81d3c47c2de646b68bbc189edd038389.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 10]: /images/20230531/214bdd0e767b4ba093882e6691de8ebc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 11]: /images/20230531/c162f69ca47f494ca91d3b3b571a3473.png
[20191022150335761.png]: /images/20230531/812b8eab833a4f1a9d9037f743e21e5b.png
[20191022150344925.png]: /images/20230531/d8904f5e87e54ad2b1501046e6faf10d.png
[20191022150835925.png]: /images/20230531/59f34ef7f68246889d5dc953296c1c76.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 12]: /images/20230531/be1b7510a7bf446aafbaed1818d6d787.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 13]: /images/20230531/7465c368bfef4053943cab3a3e408437.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 14]: /images/20230531/9a0aec688e2d4185b6a38c6b941f984d.png
[2019102215100826.png]: /images/20230531/f1e6648f8e2f4491ba5ab2f500c096cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 15]: /images/20230531/fd2572912f064be888dc8421bcc5024b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 16]: /images/20230531/6605adea14b74a03a3b7d83d1620a0b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 17]: /images/20230531/6e6973c30e824523a983a37fd82bac1a.png