Vue父子组件传值（超级详细！！！）

！！！认真看，我保证你会学到东西。 ！！！

一、父→子

子组件需要做的事：
①首先定义一个子组件叫son。
②在子组件里面设置一个data属性，当作父组件传过来的数值。
③用props声明一下这个数值是父组件传过来的参数。

父组件需要做的事：
①然后定义一个父组件叫father。
②引入子组件。
③注册子组件。
④使用子组件。
⑤给子组件绑定需要传过去的属性。

父组件源码：

<template>
	<view>
		<h3>父组件</h3>
		
		<input type="text" v-model="value" />
		<!-- 使用子组件 -->
		<son :data="value"></son>
		
	</view>
</template>

<script>
	//引入子组件
	import son from '@/pages/son/son.vue'
	export default {
		data() {
			return {
				value:'传递的值',
			}
		},
		methods: {
		
		},
		//注册子组件
		components: {
		    son
		  }
	}
</script>

<style>

</style>

子组件源码：

<template>
	<view>
		<h3>子组件</h3>
		<h4>{{data}}</h4>
		
		
	</view>
</template>

<script>
	export default {
		//这个props类似java中的super。super的作用是即调用父类的成员变量和方法。
		props:['data'],
		data() {
			return {
				
			}
		},
		methods: {
			
		},
		components: {
		    
		  }
	}
</script>

<style>

</style>

效果图如下：

可以看出，父组件传什么文字都是可以传到子组件里面去的。

---

二、子→父

重点：this.$emit(eventName, value)
$emit方法接收两个参数，eventName是事件名称，父组件需要用该名称接收参数，value是需要传递的值。

this.$emit是uniapp官方推出的，详细见官方：
https://uniapp.dcloud.io/collocation/frame/communication?id=emit

子组件需要做的事：
①首先定义一个子组件叫son。
②在子组件里面设置一个input输入框，并且双向绑定一个属性sonValue（名字可以任意起）。
③在设置一个button按钮，点击触发函数，函数的作用是把上面输入框输入的数值传达父组件里面。

父组件需要做的事：
①然后定义一个父组件叫father。
②引入子组件。
③注册子组件。
④使用子组件。
⑤给子组件绑定需要给父组件传的数值。
⑥getSonValue这个方法的作用就是接收子组件传过来的值 赋值给了方法的value，最后渲染出页面。

父组件源码：

<template>
	<view>
		<h3>父组件: {{ message }}</h3>
		<br>
		<son @send-value="getSonValue"></son>
		
	</view>
</template>

<script>
	import son from '@/pages/son/son.vue'
	export default {
		data() {
			return {
				message:''
			}
		},
		methods: {
			getSonValue(value){
				this.message = value;
			}
		},
		components: {
		    son
		  }
	}
</script>

<style>

</style>

子组件源码：

<template>
	<view>
		<h3>子组件</h3>
		
		<input type="text" v-model="sonValue" />
		<button @click="send">传递</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sonValue:''
			}
		},
		methods: {
			send(){
				this.$emit('send-value',this.sonValue);
			}
		},
		components: {
		    
		  }
	}
</script>

<style>

</style>

效果图如下：

可以看出，在子组件的input输入框输入的文字是可以上传到父组件的。

---

END