组件间通信（父子通信）

╰半夏微凉° 2022-06-02 12:06 314阅读 0赞

（1）父->子通信 props down

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
    	<div id="example">
    		<my-cart></my-cart>
    	</div>
    
    	<script type="text/javascript">
    		//父->子通信  props down
    		Vue.component('my-cart',{
    			template:`
    				<my-header myTitle="购物车"></my-header>
    			`
    		});
    
    		Vue.component('my-header',{
    			props:['myTitle'],
    			template:`
    				<h1>{
       {myTitle}}</h1>
    			`
    		});
    
    		new Vue({
    			el:'#example',
    			data:{
    				msg:'VueJS is Awesome'
    			}
    		});
    	</script>
    </body>
    </html>

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
    	<div id="example">
    		<my-login></my-login>
    	</div>
    
    	<script type="text/javascript">
    		//父->子通信 props down 
    		Vue.component('my-login',{
    			template:`
    				<form>
    					<my-input tips="请输入用户名" labelName="用户名"></my-input>
    					<my-input tips="请输入密码" labelName="密码"></my-input>
    					<my-button btnName="登录"></my-button>
    					<my-button btnName="注册"></my-button>
    				</form>
    			`
    		});
    
    		Vue.component('my-input',{
    			props:['labelName','tips'],
    			template:`
    				<div>
    					<span>{
       {labelName}}:</span>
    					<input type="text" :placeholder="tips" />
    				</div>
    			`
    		});
    
    		Vue.component('my-button',{
    			props:['btnName'],
    			template:`
    					<button>{
       {btnName}}</button>
    			`
    		});
    
    		new Vue({
    			el:'#example',
    			data:{
    				msg:'VueJS is Awesome'
    			}
    		});
    	</script>
    </body>
    </html>

（2）子->父通信 event up

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
    	<div id="example">
    		<parent></parent>
    	</div>
    
    	<script type="text/javascript">
    		//子->父通信 event up  push
    		Vue.component('parent',{
    			data:function(){
    				return {
    					myValue:''
    				}
    			},
    			methods:{
    				rcvMsg:function(msg){
    					//console.log(arguments);
    					console.log("接收到数据了"+msg);
    					this.myValue=msg;
    				}
    			},
    			template:`
    				<div>
    					<h1>这是父组件</h1>
    					<p>子组件信息：<span>{
       {myValue}}</span></p>
    					<hr/>
    					<son @toFather="rcvMsg"></son>
    				</div>
    			`
    		});
    
    		Vue.component('son',{
    			methods:{
    				handleClick:function(){
    					this.$emit('toFather','qq');
    				}
    			},
    			template:`
    				<div>
    					<h1>这是子组件</h1>
    					<button @click="handleClick">发送给父组件</button>
    				</div>
    			`
    		});
    
    		new Vue({
    			el:'#example',
    			data:{
    				msg:'VueJS is Awesome'
    			}
    		});
    	</script>
    </body>
    </html>

（3）综合运用（页内聊天室）

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
    	<div id="example">
    		<my-chatroom></my-chatroom>
    	</div>
    
    	<script type="text/javascript">
    		Vue.component('my-chatroom',{
    			data:function(){
    				return {
    					msgList:[]
    				}
    			},
    			methods:{
    				rcvMsg:function(msg){
    					console.log(msg);
    					this.msgList.push(msg);
    				}
    			},
    			template:`
    				<div>
    					<ul>
    						<li v-for="tmp in msgList">{
       {tmp}}</li>
    					</ul>
    					<my-user myName="lucy" @sendEvent="rcvMsg"></my-user>
    					<my-user myName="milk" @sendEvent="rcvMsg"></my-user>
    				</div>
    			`
    		});
    
    
    		Vue.component('my-user',{
    			props:['myName'],
    			data:function(){
    				return {
    					userInput:'',
    					canSend:false
    				};
    			},
    			methods:{
    				sendMsg:function(){
    					var msg=this.myName+":"+this.userInput;
    					this.$emit('sendEvent',msg);
    					this.userInput='';
    					this.canSend=false;
    				},
    				stateListen:function(){
    					//console.log("状态监听");
    					if(this.userInput.trim()!=''){
    						this.canSend=true;
    					}else{
    						this.canSend=false;
    					}
    				}
    			},
    			template:`
    				<div>
    				{
       {myName}}：<input type="text" placeholder="请输入" v-model="userInput" v-on:mouseout="stateListen">
    					  <button :disabled="!canSend" @click="sendMsg()">发送</button>
    				</div>
    			`
    		});
    
    		new Vue({
    			el:'#example',
    			data:{
    				msg:'VueJS is Awesome'
    			}
    		});
    	</script>
    </body>
    </html>

（4）扩展

1、ref 子->父

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
    	<div id="example">
    		<my-cart></my-cart>
    	</div>
    
    	<script type="text/javascript">
    		//ref  父->子
    		Vue.component('my-header',{
    			data:function(){
    				return {
    					isUserLogin:true
    				}
    			},
    			template:`
    				<div>
    					<h1>这是页头</h1>
    				</div>
    			`
    		});
    
    		Vue.component('my-cart',{
    			mounted:function(){
    				//console.log(this.$refs.header);
    				this.ulogin=this.$refs.header.isUserLogin;
    			},
    			data:function(){
    				return {
    					ulogin:false
    				}
    			},
    			template:`
    				<div>
    					<my-header ref="header"></my-header>
    					<ul v-if="ulogin">
    						<li>test01</li>
    						<li>test02</li>
    						<li>test03</li>
    					</ul>
    				</div>
    			`
    		});
    
    		new Vue({
    			el:'#example',
    			data:{
    				msg:'VueJS is Awesome'
    			}
    		});
    	</script>
    </body>
    </html>

2、this.$parent 父->子（箭头是数据流通方向）

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
    	<div id="example">
    		<parent></parent>
    	</div>
    
    	<script type="text/javascript">
    		Vue.component('parent',{
    			data:function(){
    				return {
    					myAge:30
    				}
    			},
    			template:`
    				<div>
    					<h1>这是父组件</h1>
    					<hr>
    					<son></son>
    				</div>
    			`
    		});
    
    		Vue.component('son',{
    			mounted:function(){
    				console.log(this.$parent.myAge); //会提升耦合度
    			},
    			template:`
    				<div>
    					<h1>这是子组件</h1>
    				</div>
    			`
    		});
    
    		new Vue({
    			el:'#example',
    			data:{
    				msg:'VueJS is Awesome'
    			}
    		});
    	</script>
    </body>
    </html>