Vue组件通信详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43741946/article/details/103778142

组件通信一之$emit和props

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script  src="../js/vue.js" type="text/javascript">
		</script>
		<div id="app"></div>
	
	
	<script type="text/javascript">
		
		var Child={
			data(){
				return{
					childData:"我是子组件数据"
				}
			},
			template:`
				<div>
					<h5>我是子组件</h5>
					<h5>{{parent}}</h5>
					<button @click="print">打印</button>
					<!--向父组件传递通信-->
					<input type="text" v-model="childData" @input="changValue(childData)">
				</div>
			`,
			props:['parent'],
			methods:{
				print(){
					console.log(this.parent);
				},
				changValue(val){
					//console.log(this.childData);
					this.$emit("getChildData",val);
				}
				
			}
		
		} ;
		
		var Parent = {
			components:{
				Child
			},
			
			template:`
				<div>
					<h2>我是父组件</h2>
					<h4>{{msg}}</h4>
					<Child :parent='msg' @getChildData="showChildData"/>
				</div>
			`,
			data(){
				return{
					msg:"我是父组件的数据"
				}
			},
			methods:{
				showChildData(val){
					console.log("我在父组件显示："+val);
				}
			}
			
		}
		
		new Vue({
			el:"#app",
			data(){
				return{
					
				}
			},
			components:{
				Parent
			},
			template:`
				<Parent/>
			`
			
		});
	</script>
	</body>
</html>

组件之间通信二之$listeners和$attrs

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script  src="../js/vue.js" type="text/javascript">
		</script>
		<div id="app"></div>
	
	
	<script type="text/javascript">
		
		var C={
			data(){
					return {						
					}
			},
			template:`
				<div>
					<div @click="cClickHandler">{{this.$attrs.parent}}</div>
				</div>
			`,
			methods:{
				cClickHandler(){
					alert(1);
					this.$emit('getChildData',"我是c中的数据");
				}
			}
		}
		
		var Child={
			data(){
				return{
					childData:"我是子组件数据"
				}
			},
			components:{
				C
			},
			props:['message'],
			template:`
				<div>
					<!--向父组件传递通信-->	
					<C v-bind="$attrs" v-on="$listeners"></C>
					
				</div>
			`,
			
			methods:{
				
				
			}
		
		} ;
		
		var Parent = {
			components:{
				Child
			},
			
			template:`
				<div>
					<h2>我是父组件</h2>
					<Child :parent='msg' v-on:getChildData="getCData"/>
					<h1>测试</h1>
				</div>
			`,
			data(){
				return{
					msg:"我是父组件的数据"
				}
			},
			methods:{
				getCData(val){
					console.log(val);
				}
			}
			
		}
		
		new Vue({
			el:"#app",
			data(){
				return{
					
				}
			},
			components:{
				Parent
			},
			template:`
				<Parent/>
			`
			
		});
	</script>
	</body>
</html>

组件之间的通信三之总线

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript" src="../js/vue.js"></script>
		<div id="app">
		</div>
		<script type="text/javascript">
			
			var EventBus = new Vue();
			
			Vue.component("A",{
				data(){
					return{
						msg:''
					}
				},
				template:`
					<div>
						<h2>A</h2>
						<h3>{{msg}}</h3>
					</div>
				`,
				created(){
				    console.log(EventBus.message)
					this.msg=EventBus.message;
				    // -> 'hello'
				    EventBus.$emit('getChildData', 'from child')
				  }
			});
			
			var App={
				data(){
					return{
						
					}
				},
				template:`
					<A></A>
				`
			};
			new Vue({
				el:"#app",
				data(){
					return{
						msg:"this is a message"
					}
				},
				components:{
					App
				},
				template:`
					<App/>
				`,
				created:function(){
					//变量保存
					EventBus.message=this.msg;
					//事件监听
					EventBus.$on("getChildData",function(val){
						console.log(val);
					});
				}
			});
		</script>
	</body>
</html>

组件之间的通信四之provide和inject

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript" src="../js/vue.js"></script>
		<div id="app">
		</div>
		<script type="text/javascript">
			
			
			Vue.component("Child",{
				data(){
					return{
						data:''
					}
				},
				inject:['to'],
				template:`
					<div>
						<h2>child</h2>
						<h3>{{data}}</h3>
					</div>					
				`,
				mounted(){
					console.log(this.to);
					this.data=this.to;
				}
			});
			
			Vue.component("Parent",{
				template:`
					<Child/>					
				`	
			});
			
			var App={
				data(){
					return{
						msg:"App"
					}
				},
				provide(){
					//to:this.msg
					return{
						to:this.msg
					}
				},
				template:`
					<Parent/>
				`
			};

			new Vue({
				el:"#app",
				data(){
					return{
						
					}
				},
				components:{
					App
				},
				template:`
					<App/>
				`
				
			});
		</script>
	</body>
</html>

组件之间的通信五之$children

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript" src="../js/vue.js"></script>
		<div id="app">
		</div>
		<script type="text/javascript">
			
			
			/* Vue.component("Child",{
				props:{
					value:String,
				},
				data(){
					return{
						message:this.vaule
					}
				},
				template:`
					<div>
						<h2>child</h2>
						<h3>{{message}}</h3>
					</div>					
				`
			}); */
			
			Vue.component("Parent",{
				props:{
					value:String,
				},
				data(){
					return{
						message:this.value
					}
				},
				template:`
				<div>
					<p @click="handlerValue">Parent{{message}}</p>
					<input v-model="message">
					
				</div>
				`,
				methods:{
					handlerValue(){
						//console.log(this);
						this.$children[0].message=this.message;
						console.log(this.$children[0].message);
					}
				}
					
			});
			
			var App={
				data(){
					return{
						msg:"App"
					}
				},
				template:`
					<div>
						<p>{{msg}}</p>
						<button @click="handlerValue">test</button>
						<Parent/>
					</div>
				`,
				methods:{
					handlerValue(){
						//console.log(this);
						this.$children[0].message=this.msg;
						//console.log(this.$children[0].message);
					}
				}
			};

			new Vue({
				el:"#app",
				data(){
					return{
						
					}
				},
				components:{
					App
				},
				template:`
					<App/>
				`
				
			});
		</script>
	</body>
</html>