最全！vue 组件通信的16种方式

1、props，父组件向子组件传参

2、$emit、$on ，子组件向父组件传参

3、v-model，可以通过vue2.6新增的model属性控制父组件绑定v-model的事件与值

4、$parent、$children、父子组件相互调用的方法，但是如果写多会造成代码难以理解，比如子组件改变了父组件的值，但是开发人员在父组件里面，找不到和子组件有关联地方。

5、$ref 写在div标签上，就相当于document.getElementById(’#div’)，写在子组件上，就能获取这个子组件实例的引用，比如

<el-button type="primary" ref="btn"> <el-button>

console.log(this.$refs.btn.type) // 因为子组件内部可以通过this.type获取type的值，所以输出为primary。
// 也可以执行组件的方法
this.$refs.btn.handleCick()

6、$bus 在vue的原型上挂载一个vue，利用总线机制，这样$bus就有了第二条的$emit，和$on。

7、.sync，用过element-ui的模态框就知道，这是一个子组件可以改变父组件基本数据值的方式，但是子组件只能有一个值作为.sync来绑定，this.$emit(‘update:title’, ‘现在的title变成我了’）

8、vuex，这个就不说了

9、路由传参

10、$attrs属性绑定 和 $listeners事件绑定

// name为 ZjInput 的组件
<input 
	v-bind="$attrs"
	v-bind="$listeners"
/>
<zj-input placehoder="请输入“ />
// 子组件并没有声明props为placeholder的属性，但input仍能显示提示文本。
// 但是这种情况下会造成父组件标签上也会有placehoder这个属性，虽然不起作用，但还是去掉好一些
// 可以在子组件的export default 下面设置inheritAttrs: false,  这样placehoder就只会出现在input上面了 

11、provide/inject 和props差不多，但不同的是，provide可以在app.vue传参，inject可以在无论层级多深的组件里面接收，只做记录，用法可以百度。

12、$root，获取当前组件的顶级实例，如果在子组件里面使用this.$root，将会获取父组件的实例，孙组件则获取爷组件实例。如果当前组件不是谁的子组件，则this.$root === this

13、vue2.6之后的作用域插槽

<!-- 子组件 name为 Gender -->
<template>
	<div> 
		<slot :gender="boy"></slot>	
	</div> 
</template>

<!-- 父组件 -->
<gender>
	<template #sex="gender"> 
		{{gender}}
	</template>
</gender>

// 显示
boy

14、mixin 全局混入，应该也算一种

15、@hook:mounted=“handleChildMounted” 当使用别人的组件时，希望别人的组件进入这个生命周期，父组件做出对应处理，又不好意思改动别人组件时，可以用@hook:生命周期=“父组件事件名”，来让父组件做对应的事情。

16、broadcast和dispatch，vue1.0之后废弃了，但是element觉得有用就保留了，一般都作为一个mixins去使用, broadcast是向特定的父组件触发事件，dispatch是向特定的子组件触发事件。（其实这个应该不算，因为已经被废弃无法使用了，但是知道的也挺多，就做个记录）

<el-form>
	<el-form-item>
		<el-input></el-input>
	</el-form-item>
</el-form>

// 假如input有正则，当el-input触发正则时，需要交给父组件el-form-item来验证值是否符合正则，
// 但是如果el-form-item的位置不是其自身，而是一个div,
// 这时候就无法使用emit来让el-form-item验证了，所以需要用到这个。

细想能想出来，但是面试时老忘，写下来面试前看看。