Vue面试之组件通信的方式总结（上篇）

    最近在整理一些前端面试中经常被问到的问题，分为vue相关、react相关、js相关、react相关等等专题，可持续关注后续内容，会不断进行整理~

    在Vue框架中，提供了多种组件通信方式：props父子组件传参、插槽传参、Event Bus方式、vuex方式传参等，本篇先对前两种方法进行总结~

props父子组件传参

props父组件向子组件传参

props算是vue中比较简单的语法，通过在标签中定义属性的方式实现父组件对子组件的信息传递，关于传参的限定有三种方式：
需要注意的是，props是单向数据流传递，因此对接收到的props只是使用，不能修改！

数组形式

该方式是最为简单的方式，只需在接收prop的组件中以数组的形式备案要使用的props参数名即可，如下示例：

export default {
   
	name: 'xxx',
	props: [
		'name', 'age', 'sex'
	]
}

对象的简单形式

如果想要指定接收props参数的类型，可通过此种方式进行简单限定，如：

export default {
   
	name: 'xxx',
	props: {
   
		name: String,
		age: Number,
		sex: String
	}
}

对象的复杂形式

如果还要对参数进行进一步的限制，如是否必输、默认值等，可采用此种方式进行限定：

export default {
   
	name: 'xxx',
	props: {
   
		name: {
   
			type: String,
			required: false,
			default: '小红'
		},
		age: {
   
			type: Number,
			required: true,
			default: 12
		},
		sex: {
   
			type: String,
			required: false
		}
	}
}

如果传递prop时没有满足对应限制，则会在控制台上报错。

props子组件向父组件传参

props也可实现子组件向父组件传递数据，即利用父组件向子组件传递事件/方法的形式，通过这种方式，在子组件使用父组件传过来的方法时，就可利用参数传递的方式，将参数传递给父组件，真是妙~

通过传递方法的形式

/* parent组件 * /
<Son :something="doSomething"