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

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

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

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

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

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

 

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 的组件

	
	

// 显示 boy

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

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

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

	
		
	


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

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