vue2.0 组件

最新推荐文章于 2023-10-08 10:53:27 发布

sly94

最新推荐文章于 2023-10-08 10:53:27 发布

阅读量955

点赞数

本文链接：https://blog.csdn.net/sly94/article/details/72528716

版权

一：什么是组件

组件（component）是vue.js最强大的功能之一。组件可以扩展html元素，封装可重用的代码。在较高层面上，组件是自定义元素，vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生html元素的形式，以is特性扩展。

二：使用组件

1.组件全局注册

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<script src="vue2.1.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="example">
   <my-component></my-component> 
</div>
</body>
<script type="text/javascript">
		// 注册
		Vue.component('my-component', {
		  template: '<div>全局注册组件成功!</div>'
		})

		var vm = new Vue({
		  el:'#example'
		})
	
	</script>
</html>

2.局部注册组件

注意事项：组件名称用驼峰式时如myThird，在父组件里面使用自组件是<my-third></my-third>要讲驼峰式改为“-”如果写成<myThird></myThird>则会报错;当子组件DOM元素较多时，写在js里面拼接不方便也不利于阅读，使用<script type="text/x-template">使用字符串模板更合适

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<script src="vue2.1.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="example">
   <my-first></my-first> 
   <my-second></my-second>
   <my-third></my-third>
   <script id="third" type="text/x-template">
   	<div>第三种方式局部注册组件成功！</div>'
   </script>
</div>
</body>
<script type="text/javascript">
		var child = {
			template:'<div>第二种方式局部注册组件成功！</div>'
		}
		var vm = new Vue({
		  el:'#example',
		  components:{
		  	'my-first':{
		  		template:'<div>第一种方式局部注册组件成功！</div>',
		  	},
		  	'my-second':child,
		  	'myThird':{
		  		template:'#third'
		  	}
		  }
		})
	</script>
</html>

3.子组件里面的data必须是函数

当写成data:{}vue会报错

data:{}

data:function(){}

4.构成组件

组件意味着协同工作，通常父子组件会是这样的关系：组件A在它的模板中使用了组件B。它们之间必然需要相互通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知父组件，然而，在一个良好定义的接口中尽可能将父子组件解耦是很重要的。这保证了每个组件可以在相对隔离的环境中书写和理解，也大幅提高了组件的可维护性和可重用性。

在Vue.js中，父子组件的关系可以总结为props down，events up。父组件通过props向下传递数据给子组件，子组件通过events给父组件发送消息。

三：组件通讯

1.父子组件之间通讯，父组件通过props传递数据，子组件通过events事件将修改之后的值传递给父组件

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<script src="vue2.1.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="example">
	<div>父组件的myMessage:{{myMessage}}</div>
	<input type="text" v-model="myMessage">
	<!-- props传递值时，驼峰式命名的值会转换成相对应的短横线隔开式 
		:my-message='myMessage'此处的:与v-bind:一样;
		my-message：是子组件 props:['myMessage']的myMessage转换成的短横线隔开式;
		myMessage：是父组件中data的属性名;
		@change-my-message='changeMyMessage'
		@change-my-message与v-on:change-my-message一致,$on用来监听事件，子组件里面$emit声明的事件
		changeMyMessage父组件的函数
	-->
  	<my-first 
  			:my-message='myMessage'
  			@change-my-message='changeMyMessage'
  			>	
	</my-first> 
   <script id="first" type="text/x-template">
   		<div>
   			<div>子组件的myMessage:{{myMessage}}</div>
   	 		<input type="text" v-model='myMessage' value=""> 
   		</div>
   		
   </script>
</div>
</body>
<script type="text/javascript">
	
		var vm = new Vue({
		  el:'#example',
		  data:{
		  	myMessage:'hello vue'
		  },
		  methods:{
		  	/**
		  	*子组件修改值之后通过events，将修改的值传给父组件，父组件再去修改data的值
		  	*/
		  	changeMyMessage:function(val){
		  		this.myMessage = val;
		  	}
		  },
		  components:{
		  	'myFirst':{
		  		template:'#first',
		  		 props:['myMessage'],//通过props，父组件像子组件传值
			  	 data:function(){//子组件必须data必须是函数
			  		return {
			  			message:this.myMessage//子组件里面声明一个message变量且初始值为父组件传递的myMessage，但是父组件myMessage修改时，message是不会改变的。
			  		}
			  	},
			  	watch:{
			  		/*
			  		*监听子组件myMessage，并且通events事件$emit将修改的值传给父组件
			  		*/
			  		myMessage:function(newVal,oldVal){
			  			//$emit用来触发事件
			  			this.$emit('change-my-message',newVal);
			  		}

			  	}
		  	}
		  }
		})
	</script>
</html>

2.非父子组件之间通讯

1>如果两个子组件之间通讯，创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<script src="vue2.1.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="example">
 
   <my-second></my-second>
   <my-third></my-third>
    <script id="second" type="text/x-template">
   		<button @click="eve">click me 传递事件</button>
   </script>
   <script id="third" type="text/x-template">
   		<div>子组件用来接收:{{msg}}</div>'
   </script>
</div>
</body>
<script type="text/javascript">
		//创建事件中心
		var bus = new Vue();
		var vm = new Vue({
		  el:'#example',
		  components:{	
		  	'my-second':{
				template:'#second',
				methods:{
					eve:function(){
						bus.$emit('change','hehe');//bus触发事件
					}
				}
		  	},
		  	'myThird':{
		  		template:'#third',
		  		data:function(){
		  			return {
		  				msg:""
		  			}
		  		},
		  		created: function(){
		  			bus.$on('change',()=>{//bus接收事件
		  				this.msg = 'hehe'
		  			})
		  		}
		  	}
		  }
		});
	</script>
</html>