vue基础篇之组件1

最新推荐文章于 2022-09-05 20:52:40 发布

keep789

最新推荐文章于 2022-09-05 20:52:40 发布

阅读量201

点赞数

分类专栏： Vue 文章标签： vue组件 vue模板

本文链接：https://blog.csdn.net/keep789/article/details/81913324

版权

Vue 专栏收录该内容

15 篇文章 4 订阅

订阅专栏

组件是可复用的Vue实例，vue里面用到组件的好处主要是提高代码的复用率，便于后期管理维护代码。

注册组件（三种方法）

注册组件，传入一个扩展过的构造器
Vue.component("v-header",Vue.extend({ }))
注册组件，传入一个选项对象（自动调用 Vue.extend）
Vue.component("v-footer",{ })
vue实例化中components { ‘组件名’: 组件内容 }
           components:{
               "v-con":{
                   template:"<div><h2>container</h2></div>"
               }
           }

//index.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../8-20/js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="out">
			<v-header></v-header>
			<v-con></v-con>
			<v-footer></v-footer>
		</div>
	</body>
	<script type="text/javascript">
		// 1.注册组件，传入一个扩展过的构造器
		Vue.component("v-header",Vue.extend({
			template:"<div><h1>hello  header</h1></div>"	
		}))
		//2. 注册组件，传入一个选项对象（自动调用 Vue.extend）
		Vue.component("v-footer",{
			template:"<div><h3>hi   footer</h3></div>"
		})	
		// 获取注册的组件（始终返回构造器）
		var MyComponent = Vue.component('v-header')
		 console.log(MyComponent)  
		var vm = new Vue({
			el:"#out",
			data:{
				
			},
			//3.vue实例化  中 components  {  ‘组件名’: 组件内容  }
                      //私有组件
			components:{
				"v-con":{
					template:"<div><h2>container</h2></div>"
				}
			}
		})
	</script>
</html>

下面是一个组件注册的例子


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>组件</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="outer">
			<h1>{{tit}}</h1>
			<hr />
			<v-header></v-header>
			<v-content></v-content>
			<v-footer></v-footer>
			<hr />
			<v-demo></v-demo>
		</div>
	</body>
	<script type="text/javascript">
		Vue.component("v-header",Vue.extend({
			template:"<h1>hello</h1>"
		}))
		Vue.component("v-footer",({
			template:"<h2>hi</h2>"
		}))
		Vue.component("v-demo",({
			template:"<h1 @click='run()'>这是一个头部组件11--{{name}}--{{msg}}</h1>",
			data:function(){
				return {
					name:"张三",
					msg:"he is Lisi's friend",
					i:0
				}
			},
			methods:{
				run(){
//					console.log(this.i++)
					this.i++;
					if(this.i%2==0){
						this.name="王二";
						color="red";
						this.msg="He is Zhangsan's friend"
					}else{
						this.name="张三";
						this.msg="He is Lisi's friend"
					}
				}
			}
		}))
		
		var vm = new Vue({
			el:"#outer",
			data:{
				tit:"你好啊---"
			},
			components:{
				'v-content':{
					template:"<h2>--我是内容---</h2>"
				}
			}
		})
	</script>
</html>

vue定义模板的方式有两种

<script type=“x-template” id=“header”>内容内容 </script>

template:'#header’
<template id=“footer”>内容内容 </template>

template:'#footer’

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="out">
		
		<h2>组件</h2>
		<v-header></v-header>
		<hr />
		<v-footer></v-footer>	
		<hr />
		<v-con></v-con>

	</div>
	
	<div id="inner">
		<v-header></v-header>	
		<!--<v-con></v-con>-->
	</div>
	<!--定义模板的方式一-->
	<script type="x-template" id="con">
		<div>
			<h1>hello --  {{str}}</h1>
		</div>
	</script>
	<!--定义模板的方式二-->
	<template id="footer">
		<div>
			<h1>helo</h1>
			<div>另一个组件--hello</div>		
		</div>
	</template>

</body>
<script type="text/javascript">
	
	Vue.component('v-header',Vue.extend({
		template:`<div>
					<div>hello 组件</div>
					<div>hi---{{str}}</div>
					<button @click="tap()">更改数据</button>
				</div>`,
		data:function(){
			return{
				str:'数据'
			}
		},
		methods:{
			tap(){
				this.str='你好'
			}
		},
		mounted(){
			console.log('组件挂载完成')
		}
	}))
	
	var com=Vue.component('v-footer',{
		template:'#footer'
	})
	
//	console.log(com)
	
	var vm=new Vue({
		el:'#out',
		data:{
			
		},
		methods:{
			
		},
		components:{
			'v-con':{
				template:'#con',
				data:function(){
					return{
						str:'hi'
					}
				}
			}
		}
	})
	
	
	var vm1=new Vue({
		el:'#inner'
	})
	
	
</script>
</html>

组件之间的嵌套也是很常用的，下面是基本写法

components:{
	'v-header':{
		template:'#header',
		data:function(){
			return {
				msg:'这是一个header组件的数据'
			}
		},
		components:{   /*组件里面嵌套组件*/
			'v-nav':{
				template:'#nav',
				}
			}
		}
	}

keep789

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础篇之组件1

组件是可复用的Vue实例，vue里面用到组件的好处主要是提高代码的复用率，便于后期管理维护代码。注册组件（三种方法）注册组件，传入一个扩展过的构造器 Vue.component("v-header",Vue.extend({ })) 注册组件，传入一个选项对象（自动调用 Vue.extend） Vue.component("v-footer",{ ...
复制链接

扫一扫