组件间通信（父子通信）

最新推荐文章于 2021-09-11 20:56:49 发布

spfLinux

最新推荐文章于 2021-09-11 20:56:49 发布

阅读量256

点赞数

分类专栏： vue 文章标签：组件间通信父子通信

vue 专栏收录该内容

35 篇文章

订阅专栏

（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>