IT序号网

vue的组件知识解答

shasha 2021年07月13日 编程语言 130 0

1、组件

<!DOCTYPE html> 
<html> 
<head> 
	<title>组件</title> 
 
</head> 
<body> 
 
	<div id="app"> 
		<my-component></my-component> 
 
		<my-component1></my-component1> 
	</div> 
 
	<div id="app1"> 
		<my-component></my-component> 
		<jubuzujian></jubuzujian> 
 
		<jubuzujian2></jubuzujian2> 
 
	</div> 
 
 
	<!-- 可以把组件中的template的字符串写在这里,叫做模板字符串,如果字符串比较庞大,则可以使用这样的方式定义template --> 
	<script type="text/x-Template" id="tpl1"> 
			<tr><td>1</td><td>2</td><td>3</td></tr> 
 
 
	</script> 
	<script type="text/javascript" src="vue.js"></script> 
	<script type="text/javascript"> 
 
		// 注册全局组件,任何一个vue实例都可以使用,作用域是全局 
		Vue.component("my-component",{ 
			template:'<div>{{mes}}<input type="button" value="tanchu" v-on:click="tanchu"></div>', 
			data:function(){ 
				return { 
					mes:"hello component" 
				} 
			}, 
			methods:{ 
				tanchu:function(){ 
					alert(123) 
				} 
			} 
		}) 
 
 
		// 初始化根实例 
		var app = new Vue({ 
			el:"#app", 
			data:{ 
			}, 
			// 局部注册组件的第一种方法 
			components:{ 
				"my-component1":{ 
				 template:'<div>{{mes}}<input type="button" value="jubuzujian" v-on:click="tanchu1"></div>', 
				 data:function(){ 
					return { 
						mes:"hello jubuzujian" 
						} 
					}, 
			methods:{ 
				tanchu1:function(){ 
					alert(123) 
						} 
					} 
				}	 
			} 
		}) 
 
 
		// 局部注册组件的第二种方法 
		var zujian = { 
				 template:'<div>{{mes}}<input type="button" value="oooo" v-on:click="tanchu1"></div>', 
 
				 // data必须是一个函数 
				 data:function(){ 
					return { 
						mes:"hello jubuzujian" 
						} 
					}, 
				methods:{ 
				tanchu1:function(){ 
					alert(123) 
						} 
					} 
		} 
 
 
		var zujiantpl = { 
				// 这里使用dom的选择器选择就可以了 
				 template:'#tpl1', 
				 data:function(){ 
					return { 
						mes:"hello jubuzujian" 
						} 
					}, 
				methods:{ 
				tanchu1:function(){ 
					alert(123) 
						} 
					} 
		} 
 
 
		var app1 = new Vue({ 
			el:"#app1", 
			data:{ 
			}, 
			components:{ 
				"jubuzujian":zujian, 
				"jubuzujian2":zujiantpl 
			} 
		}) 
			 
	</script> 
</body> 
</html> 
	 

  

2、组件之间的通信

<!DOCTYPE html> 
<html> 
<head> 
	<title>组件通信</title> 
 
</head> 
<body> 
 
	<div id="app"> 
		<!-- 静态传参 --> 
		<my-new-tpl1 mes="hello vue1"></my-new-tpl1> 
 
		<!-- 动态传参 --> 
		<my-new-tpl1 v-bind:mes="mes"></my-new-tpl1> 
 
		<my-new-tpl1 mes="hello vue3" v-on:jieshou="jieshoufunc"></my-new-tpl1> 
	</div> 
 
	<script type="text/x-Template" id="id1"> 
		<input type="button" value="tanchu" v-on:click="tanchu1"> 
 
 
	</script> 
	<script type="text/javascript" src="vue.js"></script> 
	<script type="text/javascript"> 
 
 
		var mytpl = { 
				 template:'#id1', 
				 // 接受一个静态属性 
				 props:["mes"], 
				 // data必须是一个函数 
				 data:function(){ 
					return { 
						mes:"hello jubuzujian" 
						} 
					}, 
				methods:{ 
				tanchu1:function(){ 
					alert(this.mes); 
					this.$emit("jieshou") 
						} 
					} 
				} 
 
		var app = new Vue({ 
			el:"#app", 
			data:{ 
				mes:"zhen TM nan" 
			}, 
			components:{ 
				"my-new-tpl1":mytpl 
			}, 
			methods:{ 
				jieshoufunc:function(){ 
					alert("123.....") 
				} 
			} 
		}) 
			 
	</script> 
</body> 
</html> 

  


发布评论

分享到:

IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

vue的表单输入绑定知识解答
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。