Vue:父子间的通信

最新推荐文章于 2024-09-15 17:43:02 发布

KeithRong

最新推荐文章于 2024-09-15 17:43:02 发布

阅读量107

点赞数

分类专栏： Vue 文章标签： vue html javascript

本文链接：https://blog.csdn.net/weixin_42103026/article/details/103651994

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.父->子 prop

在子组件中使用:msg对应prop中的属性

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>使用prop实现父往子传值</title>
</head>
<body>
<div id="app">
	父组件：<input type="text" v-model="msg"><br>
	<cpn :msg="msg"></cpn>
</div>
</body>

<template id="cpn">
	<div>
		子组件：{{msg}}
	</div>
</template>

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
const app = new Vue({
	el: '#app',
	data:{
		msg: ''
	},
	components:{
		cpn:{
			template: '#cpn',
			props:{
				msg: String
			}
		}
	}
})
</script>
</html>

2. 父->子 $refs

在父组件的<cpn>中定义ref="mycpn"属性，在方法中使用this.$refs.mycpn可以获取子组件的Vue对象

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>使用$refs实现父往子通信</title>
</head>
<body>
<div id="app">
	<cpn ref="mycpn"></cpn>
	<button @click="btnClick">按钮</button>
</div>
</body>

<template id="cpn">
	<div>我是子组件</div>
</template>

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
const app = new Vue({
	el: '#app',
	data:{
		message: 'Hello World'
	},
	methods:{
		btnClick(){
			console.log(this.$refs.mycpn)
			this.$refs.mycpn.showMessage()
		}
	},
	components:{
		cpn:{
			template: '#cpn',
			methods:{
				showMessage(){
					console.log('showMessage')
				}
			}
		}
	}
})
</script>
</html>

3.子->父 $emit

子组件定义事件 changeEvent，使用this.$emit传 (事件名,值) 给父组件
父组件中的子组件标签采用@change-handler (事件名) 接收并声明changeHandler方法
在父组件的changeHandler方法中写业务逻辑

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>使用$emit实现子往父传值</title>
</head>
<body>
<div id="app">
	<cpn @change-handler="changeHadler"></cpn>
	父组件：{{msg}}
</div>
</body>

<template id="cpn">
	<div>
		子组件：<input type="text" @input="changeValue">
	</div>
</template>

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
const app = new Vue({
	el: '#app',
	data:{
		msg: ''
	},
	methods:{
		changeHadler(val){
			this.msg = val
		}
	},
	components:{
		cpn:{
			template: '#cpn',
			methods:{
				changeValue(event){
					this.$emit('change-handler', event.target.value)
				}
			}
		}
	}
})
</script>
</html>

4.子->父 $parent

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>使用$parent实现子访问父</title>
</head>
<body>
<div id="app">
	<cpn></cpn>
</div>
</body>

<template id="cpn">
	<div>
		<div>我是子组件</div>
		<button @click="btnClick">按钮</button>
	</div>
</template>

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
const app = new Vue({
	el: '#app',
	data:{
		message: 'Hello World'
	},
	components:{
		cpn:{
			template: '#cpn',
			methods:{
				btnClick(){
					console.log(this.$parent)
					console.log(this.$parent.message)
				}
			}
		}
	}
})
</script>
</html>