快速了解VUE组件

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

别哭别梦别恋别醉别爱他

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

阅读量114

点赞数

分类专栏：今日所学日报

本文链接：https://blog.youkuaiyun.com/lihua130427/article/details/102678078

版权

日报同时被 2 个专栏收录

39 篇文章

订阅专栏

今日所学

36 篇文章

订阅专栏

什么是vue组件？

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

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

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

组件注册-全局

全局注册组件语法：

Vue.component('my-aaa',{
		
	})

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

要在父实例中使用这个组件，必须要在实例创建前注册，之后就可以用**<组件名></组件名>**形式来使用组件了，示例代码如下

```csharp
<body>
		<div id="demo">
			<my-aaa></my-aaa>
		</div>
	</body>
	<script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		Vue.component('my-aaa',{
			//选项
		})
		var demo =new Vue({
			el:"#demo",
			data:{
				
			}
		})
	</script>

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

<body>
		<div id="demo">
			<my-aaa></my-aaa>
		</div>
	</body>
	<script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		Vue.component('my-aaa',{
			//选项
			template:"<div>我是组件内容</div>"
		})
		var demo =new Vue({
			el:"#demo",
			data:{
				
			}
		})
	</script>

这样一个简单的组件内容就做好了咱们来总结下它的行成步骤吧：

①注册组件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 选项来注册组件，使组件可以嵌套。

var demo =new Vue({
			el:"#demo",
			components:{
				'my-bbb':{
					template:"<div>我是局部组件内容</div>"
				}
			}

嵌套组件代码如下：

	var child={
			template:'<div>我是局部组件嵌套内容</div>'
		}
		var demo =new Vue({
			
			el:"#demo",
			components:{
				'my-bbb':child
				}

由上例可以看出，组件components添加模板component有两种方式
1.直接绑定 2.指向已有模板

全局VS局部

全局注册组件通过Vue.component语法，全局注册的组件可以用在任何Vue 根实例 (new Vue) 的模板中。
在这里插入图片描述
全局注册有时是不够理想，例如即便你已经不再使用一个组件了，它仍然会被包含在最终的构建结果中，影响性能。
注意：局部组件只有在当前实例作用域下有效
局部组件也可以同时注册多个，引用时一一对应即可

//html
<my-abc></my-abc>
<my-acc></my-acc>

//js

var demo =new Vue({
			
			el:"#demo",
			components:{
				
				'my-abc':{
					template:`
					<p>
					局部指向多个一一对应my-abc
					</p>`
					},
				'my-acc':{
						template:`
						<b>
						局部指向多个一一对应my-acc
						</b>`
						}
					
			}
		})

组件也可以嵌套其他组件代码如下：

var demo =new Vue({
			
			el:"#demo",
			components:{
			
				'my-abc':{
					template:`
					<p>
					局部指向多个一一对应my-abc
					<b>
					局部指向多个一一对应my-acc
					</b>
					</p>`
					},
				
					
			}

全局VS局部注册的步骤

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

<body>
		<div id="demo">
			<my-aaa></my-aaa>
		</div>
	</body>
	<script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		Vue.component('my-aaa',{
			//选项
			template:"<div>我是组件内容</div>"
		})
		var demo =new Vue({
			el:"#demo",
			data:{
				
			}
		})
	</script>

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

var demo =new Vue({
			el:"#demo",
			components:{
				'my-bbb':{
					template:"<div>我是局部组件内容</div>"
				}
			}

（2）作用域

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

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

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

!在这里插入图片描述](https://img-blog.csdnimg.cn/20191022141527731.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaHVhMTMwNDI3,size_16,color_FFFFFF,t_70)

解决此缺陷的方案：可以使用特殊的is属性来挂载组件代码如下：

<div id="demo" v-cloak>
			<table border="" cellspacing="" cellpadding="">
				<tbody is=my-aaa>
					
				</tbody>
			</table>
		</div>

Vue.component('my-aaa',{
			template:'<div>我是表格组件</div>'
		})
		var demo=new Vue({
			el:"#demo",
			data:{
				
			}
		})

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

Vue.component('my-aaa', {
			template: `<div>{{name}}<br/>	
						{{age}}</div>`,
			data: function() {
				return {
					name: "这是全局组件的data方法",
					age: 18
				}
			}
		})

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

JS对象是引用关系，所以如果return出的对象引用了外部的一个对象，那这个对象就是共享的，任何一方修改都会同步，如下所示。

var num={count:0}
		Vue.component('my-aaa', {
			template: `<button @click="count++">{{count}}</button>`,
			data: function() {
				return num;
			}
		})

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

//html
	<my-aaa></my-aaa>
	<my-aaa></my-aaa>
  <my-aaa></my-aaa>

	var num={count:0}
		Vue.component('my-aaa', {
			template: `<button @click="count++">{{count}}</button>`,
			data: function() {
				return{
					count:0
				} 
			}
		})

这样，点击每个按钮就互不影响了，完全达到复用的目的。
当点击按钮时，每个组件都会各自独立维护它的 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 这样根实例特有的选项。

有任何问题可以随时联系小编