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

最新推荐文章于 2024-04-11 02:09:48 发布

web 沐

最新推荐文章于 2024-04-11 02:09:48 发布

阅读量310

点赞数

分类专栏： Vue 文章标签： Vue

本文链接：https://blog.csdn.net/weixin_45582846/article/details/102682321

版权

Vue 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

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>