Vue 父子组件传值方法

---

一、父组件向子组件传值

父组件代码↓

<template>
	<div>
		<div>父组件</div>
		<Student :name="name" :age="age"></Student>
	</div>
</template>

<script>
	// 引入组件
	import Student from './components/Student'
	
	export default {
		// name: 'App',
		components: {Student,},
		data() {
			return {
				name: "张三",
				age: 18
			}
		}
		
	}
	
</script>

---

1.简单声明接收（常用）

<template>
	<div>
		<div>子组件</div>
		<h2>学生姓名：{{ name }}</h2>
		<h2>年龄：{{ age }}</h2>
	</div>
</template>

<script>
	export default {
		// name: 'Student',
		data() {
			return {}
		},
		
		// 简单声明接收 ----------
		props: ['name', 'age']
		// ---------------------
		
	}
</script>

---

2.接收数据的同时进行 类型限制

<template>
	<div>
		<div>子组件</div>
		<h2>学生姓名：{{ name }}</h2>
		<h2>年龄：{{ age }}</h2>
	</div>
</template>

<script>
	export default {
		// name: 'Student',
		data() {
			return {}
		},
		
		// 接收数据的同时进行类型限制 ---
		props: {
			name: String,
			age: Number
		}
		// --------------------------
		
	}
</script>

3.接收数据的同时对 数据类型、必要性、默认值 进行限制

<template>
	<div>
		<div>子组件</div>
		<h2>学生姓名：{{ name }}</h2>
		<h2>年龄：{{ age }}</h2>
	</div>
</template>

<script>
	export default {
		// name: 'Student',
		data() {
			return {}
		},
		// 接收数据的同时对 数据类型、必要性、默认值 进行限制 -----
		props: {
			name: {
				type: String,	  // name传入类型必须为字符串
				required: true    // name设为必传字段
			},
			age: {
				type: Number,
				default: 233      // 默认值
			}
		},
		// ------------------------------------------------
	}
</script>

---

二、子组件向父组件传值

父组件代码↓

<template>
	<div>
		<div>父组件</div>
		
		<!-- 监听子组件emit -->
		<Student @sendMsg="sendMsg"></Student>
		
		<div>父组件接收消息：{{studentMsg}}</div>
	</div>
</template>

<script>
	// 引入组件
	import Student from '../components/Student'
	
	export default {
		components: {Student,},
		data() {
			return {
				studentMsg: null
			}
		},
		methods: {
			// 父组件接收子组件消息的方法
			sendMsg(name, age) {
				// console.log(val)
				this.studentMsg = name + age
			}
		}
		
	}
	
</script>

1. 传值方法

<template>
	<div>
		<div>子组件</div>
		
		<!-- 通过点击按钮向父组件传值 -->
		<button @click="sendMsg(name, age)">子组件向父组件传值</button>
		
	</div>
</template>

<script>
	export default {
		// name: 'Student',
		data() {
			return {
				name: '张三',
				age: 18
			}
		},
		methods: {
			sendMsg(name, age) {
			
				// 向父组件传值的方法（多个值用逗号隔开） ----
				this.$emit('sendMsg', name, age);
				// -------------------------------------
				
			}
		}
		
	}
</script>