vue父子组件之间的传值（子传父，父传子）

vue父子组件之间的传值（子传父，父传子）

---

前提首先需要了解vue中组件之间的父子关系。

主组件mainPage.vue

<template>
	<view class="body">
		<view class="header">
			{{text}}
		</view>
		<view class="main">
			<msg @getMsg="openMsg" :name="name"></msg>
		</view>
	
	</view>
</template>

<script>
	import msg from '../../components/msg.vue'
	export default {
		components: {msg},
		data() {
			return {
				text:'',
				name:'parent',
			}
		},
		methods: {
			openMsg(msg){
				this.text=msg
				console.log(msg)
			}	
		},	
	}
</script>

从代码中可以看出mainPage.vue引用了msg.vue这个主键可以知道msg.vue是mianPage.vue的子组件

子传父的方式传值：

通过在方法中使用this.$emit('值名称',"所需要传的值")，将子组件中的值传给父组件
在父组件中需要使用该值的标签上添加@值名称=“方法”
在该方法中就可以得到该值

---

如下：
msg.vue

<template>
	<view>
		<button type="primary" @click="sendMsg">发送消息</button>
	</view>
</template>

<script>
	export default {
		props:{
			name:String,
		},
		
		name:"msg",
		data() {
			return {
				
			};
		},
		methods:{
			sendMsg(){
				this.$emit('getMsg',"我是子主键,"+this.name)
			}
		}
	}
</script>

<template>
	<view class="body">
		<view class="header">
			{{text}}
		</view>
		<view class="main">
			<msg @getMsg="openMsg" :name="name"></msg>
		</view>
	
	</view>
</template>

<script>
	import msg from '../../components/msg.vue'
	export default {
		components: {msg},
		data() {
			return {
				text:'',
				name:'parent',
			}
		},
		methods: {
			openMsg(msg){
				this.text=msg
				console.log(msg)
			}
			
		},
		
		
	}
</script>

点击：

显示：{{text}}

我是子主键，则说明子传父成功

父传子的方式传值：

父组件中使用 :name=“值”，同时父组件中包含该值
子组件中通过props:{
//该name与父组件中:name一致
name:String, //这里String 是数据类型
},
在子组组件中通过this.name获取该值

#父主键mainPage.vue

	<msg @getMsg="openMsg" :name="name"></msg>

子组件msg.vue

export default {
		props:{
			name:String,
		},
		
		name:"msg",
		data() {
			return {
				
			};
		},
		methods:{
			sendMsg(){
				console.log(this.name)
			}
		}
	}

显示：

说明父传子成功！！！