vue 父组件和子组件相互传递值（父传子，子传父）

65 阅读 0 评论 43 点赞

我是靠谱客的博主风趣面包，最近开发中收集的这篇文章主要介绍vue 父组件和子组件相互传递值（父传子，子传父），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

第一步：父组件传给子组件

父组件在子组件标签上用‘：’标识一个属性，然后在子组件的props里面用‘[ ‘属性名’]’接收
父组件：

<template>
	<div>
		<h2>父组件</h2>
		<child :message="我是父组件传过来的值"></child>
	</div>
</template>
<script>
	import child from './child'
	export default{
		components:{
			child
		}
	}
</script>

子组件：

<template>
	<div>
		<h2>子组件</h2>
		<p>{{message}}</p>
	</div>
</template>
<script>
	export default{
		props:['message']
	}
</script>

第二步：子组件传给父组件

子组件通过**$.emit**(‘方法名’,‘传递的值’)传递，父组件则需要在子组件上添加对应的标识‘@子组件定义的方法名=‘接收方法名’’，在通过监听事件触发接收方法获取子组件传递的值

注意：子组件定义的方法名必须全小写，不能使用驼峰命名法

子组件：

<template>
	<div>
		<h2>子组件</h2>
		<button @click="send">向父组件传值</button>
	</div>
</template>
<script>
	export default{
		methods:{
			send(){
				this.$emit('sendmessage','向父组件传值')
			},
		}
	}
</script>

父组件：

<template>
	<div>
		<h2>父组件</h2>
		<child @sendmessage="getMessage"></child>
		<p>{{message}}</p>
	</div>
</template>
<script>
	import child from './child'
	export default{
		data(){
			return{
				message: '',
			}
		},
		components:{
			child
		},
		methods:{
			getMessage(data){
				this.message = data
			}
		}
	}
</script>