vue组件通信的8+1种方式

以下是个人对于vue组件通信各种方式的一个总结,只谈方法暂时不谈实现(实现百度一搜估计都能搜出几百万条了)

总结:

1.父子通信

1.父>子   props   子>父  $emit()

2.通过ref实现父>子   

注意:$refs不能在created生命周期中使用 因为在组件创建时候 该ref还没有绑定元素.因为$refs不是响应式的，只在组件渲染完成后才会生效，在初始渲染的时候是不存在的。如果父元素或当前元素使用了v-if或v-show，所有动态加载的模板更新它都无法相应的变化。解决办法：可以通过setTimeout(()=>{…}, 0)来实现。

3.父>子 $children  子>父$parent   

4.provide / inject API

5. 父>子$attrs    子>父$listeners

6.Vue.observable(小型vuex)

7.vuex

8.事件总线bus

9.子>父  插槽 prop  

2.兄弟通信 :   Bus；Vuex;Vue.observable(小型vuex)

3.跨级通信： Bus；Vuex；provide / inject API、Vue.observable(小型vuex)、$attrs/$listeners

www.cnblogs.com/fundebug/p/…