vue.js学习笔记十——组件的定义与示例

最新推荐文章于 2021-09-28 22:21:48 发布

武汉小喽啰

最新推荐文章于 2021-09-28 22:21:48 发布

阅读量222

点赞数

分类专栏： # vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43318134/article/details/94056963

版权

vue 专栏收录该内容

46 篇文章 8 订阅

订阅专栏

1. 什么是组件

组件的出现就是为了拆分Vue实例的代码量，能够让我们以不同的组件来划分不同的功能模块，将来我们需要什么功能就可以去调用相应的组件即可。

2. 组件化和模块化

2.1 模块化：是从代码逻辑的角度进行划分的，方便代码的分层开发，保证每个功能模块的职能单一

2.2 组件化：是从UI界面的角度进行划分的，前端的组件化，方便UI组件的重用

3. 全局组件定义的四种方式

3.1 使用Vue.extend来创建全局的Vue组件

3.1.1 定义格式

1. 创建组件模板对象

var com1 = Vue.extend({

template:'<h3>这个是使用Vue.extend创建的组件</h3>'

});

2. 引用组件对象

Vue.component('组件的名称',组件模板对象);

3.1.2 定义解释

1. 使用 Vue.extend来创建全局的Vue组件，参数为一个对象。

1.1 template属性，指定组件要展示的HTML结构

2. 使用Vue.component('组件的名称',创建出来的组件模板对象);

3.1.3 组件的使用

如果需要使用组件，直接把组件的名称，以HTML标签的形式，引入到页面中即可。如果组件名称用驼峰命名方式定义的，那么使用的时候，需要用 “ - ” 做连接符，并将大写改成小写

例如：

<body>
		<div id="app">
			<my-com1></my-com1>
		</div>
		
		<script>
			
			// 定义组件模板对象
			var com1 = Vue.extend({
				template:'<h3 style="color: red;">这个是使用Vue.extend定义的h3组件</h3>'
			});
			// 引用组件
			Vue.component('myCom1',com1)
			
			// 创建Vue实例，得到viemodel
			var vm = new Vue({
				el:'#app' 
			});
		</script>
	</body>

注意：如果组件的名称，不用驼峰命名，那么，在页面使用组件的时候，直接用组件的名称就可以了，不需要变形

3.2 直接使用Vue.component创建组件

第一种方式，创建一个组件需要两个步骤，稍微显得有点繁琐，我们可以将两个步骤合二为一，就为第二种方式了

3.2.1 格式

Vue.component('组件的名称',Vue.extend({

template:'<h3 style="color: red;">这个是使用Vue.extend定义的h3组件</h3>'

}));

例如：

Vue.component('mycom2',Vue.extend({
	template:'<h1 style="color: red;">这个是使用Vue.extend定义的h1组件</h1>'
}));

3.2.2 参数解释

1. 第一个参数，为组件的名称，将来在引入组件的时候，就是一个标签的形式。

2. 第二个参数，由Vue.extend创建的组件模板，其中template就是组件将来要展示的HTML内容

第二种方式，其实就是第一种方式的变形

3.3 第三种方式

3.3.1 格式

Vue.component('组件的名称',{

template:'这个是使用component直接定义的的h1组件'

});

例如：

Vue.component('mycom2',{
	template:'<h1 style="color: red;">这个是使用component直接定义的的h1组件</h1>'
})

注意：该方式与前两种相比，就是省略了Vue.extend，而是直接在component中传一个对象。

3.3.2 template定义组件显示内容的时候要注意

组件的template属性指向的HTML模板内容，有且只能有一个根元素

例如：如果要表示<h1>啊啊啊</h1><span>不不不</span> 这种形式的HTML内容

Vue.component('mycom2',{
	template:'<div><h1>这个是使用component直接定义的的h1组件</h1><span>sss</span></div>'
})

3.4 定义组件的第四种方式

3.4.1 格式

Vue.component('组件的名称',{

template:'#模板id'

});

例如：

Vue.component('mycom2',{
	template:'#temp'
})

模板的定义：
<template id="temp">
	<div>
		<div>
			<h1>第三种方式</h1>
			<span>文字描述</span>
		</div>
		<span>文字描述</span>
	</div>
</template>

该方式的好处是，将模板内容定义在了外部，方便读写。也可以写一些复杂的模板对象

注意：模板内容要用template标签包裹，里面写模板内容

4. 使用components定义私有组件

4.1 格式一

在vm对象中，和data平级的地方定义components

components:{

'组件的名字':{

template:'组件HTML模板'

}

例如：

var vm = new Vue({
	el:'#app' ,
	components:{
	logins:{
				template:'<h1>私有组件</h1>'
			}
	}
});

4.2 格式二

components:{

'组件的名字':{

template:'#模板id'

}

例如：

var vm = new Vue({
	el:'#app' ,
	components:{
	logins:{
				template:'#temp2'
			}
	}
});

// 定义模板内容
		<template id="temp2">
			<div>
				<div>
					<h1>第三种方式</h1>
					<span>文字描述</span>
				</div>
				<span>文字描述</span>
			</div>
		</template>

4.3 格式三

这种格式的私有组件定义分为两步；

第一步：定义模板对象字面量

var login = {template:'<h1>abc</h1>'};

第二步：在components里面定义组件，

格式：'组件的名称':组件的模板对象

components:{
    'mylogin':login
}

// 界面标签引用
<mylogin />

注意：第二步还有一种简写方法，就是利用vue的属性的特性

例如：

components:{
	login
}

// 界面标签引用
<login />

这种方式定义的组件，组件名就是模板对象名。

5. 组件中的data

5.1 定义：

			Vue.component('mycom2',{
				template:'<h1 style="color: red;">这个是使用component直接定义的的h1组件</h1>',
				data:function(){
					return {}
				}
			})

注意：组件中的data必须是一个函数，且必须返回一个对象

5.2 组件中的data的使用

和VM中的data的使用方式一样，例如：

			Vue.component('mycom2',{
				template:'<h1>这个是使用component直接定义的的h1组件，{{msg}}</h1>',
				data:function(){
					return {
						msg:'你好，组件中的data'
					}
				}
			})

实例：

	<body>
		<div id="app">
			<mycom2></mycom2>
		</div>
		
		<template id="demo">
			<div>
				<input type="button" value="加1" @click="increment"/>
				{{count}}
			</div>
		</template>
		
		<script>
			
			Vue.component('mycom2',{
				template:'#demo',
				data:function(){
					return {
						count:0
					}
				},
				methods:{
					increment(){
						this.count ++;
					}
				}
			})
			
			// 创建Vue实例，得到viemodel
			var vm = new Vue({
				el:'#app' 
			});
		</script>
	</body>

注意：在组件中，除了可以有data以外，还可以有函数。

武汉小喽啰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js学习笔记十——组件的定义与示例

1. 什么是组件组件的出现就是为了拆分Vue实例的代码量，能够让我们以不同的组件来划分不同的功能模块，将来我们需要什么功能就可以去调用相应的组件即可。2. 组件化和模块化2.1 模块化：是从代码逻辑的角度进行划分的，方便代码的分层开发，保证每个功能模块的职能单一2.2 组件化：是从UI界面的角度进行划分的，前端的组件化，方便UI组件的重用3. 全局组件定义的四种方式3.1 ...
复制链接

扫一扫

专栏目录