Vue 中的父子组件传值

父组件向子组件传值

1. 父组件的 data 组件中定义要传的值

// 父组件中定义的值
export default {
	name: '父组件',
	data() {
		return {
			students: [
				{name: 'zs', age: 22},
				{name: 'ls', age: 23}
			],
			text: '普通的文本内容'
		}		
	}
}

2. 在父组件中引用的子组件标签进行传值

v-bind 指令可以简写为 ：变量名

<child-module :students="this.students" :text="this.text"></child-module>

3. 子组件通过 props 属性来接收

第一种写法

props: ['students', 'text']

第二种写法

props: {
	students: {
		type: Array,
		required: true
	},
	text: {
		type: String,
		required: true
	}
}

4. 子组件中使用

通过 this 来使用父组件的传值即可

<h3>{{this.text}}</h3>
<div>
	<ul>
		<li v-for(item,index) in this.students>
			<p>姓名：{{item.name}}</p>
			<p>年龄：{{item.age}}</>
		</li>
	</ul>
</div>

5. 注意点

• 子组件接收的父组件的传值类型分为两种：引用类型、普通类型两种
• 普通类型：字符串 String 、数字 Number 、布尔值 Boolean、空 Null
• 引用类型：数组 Array、对象 Object
  普通类型可以直接在子组件中进行更改，并不会影响到其他组件调用父组件的值（普通类型可以随意更改）
  引用类型的值不可以随便修改，当在子组件中修改后，父组件的也会修改，那么其他引用了父组件的子组件内部的值也会发生改变。（引用类型只是一种引用，会牵扯到其他组件的使用）

子组件向父组件传值

1. 子组件通过 $emit 方法向父组件传值

传单个值

function() {
	let flag = true;
	this.$emit('sendMsg', flag);
}

传多个值

function() {
	let req = {
		'flag': true,
		'name': 'admin',
		'citys': [
			{'name': '上海'},
			{'name': '北京'}
		]
	};
	this.$emit('sendMsg', req);
}

2. 父组件中引用的子组件标签上添加函数

v-on 的简写是 @函数名

• @符号后面的 sendMsg 是子组件中定义好的第一个参数
• 双引号里的 sendMsg 是用于接收子组件传值处理的函数
• 二者可以定义为同一个名称

<child-module @sendMsg="sendMsg"></child-module>

3. 父组件中使用

req 就是子组件的传参参数

sendMsg(req) {
	console.log(req);
}