【非常重要】兼容uni-app框架的Vue之任意组件传参完美解决方案【父子组件、孙子祖辈组件、无关联的组件传参都支持】

处理事件的原则是：能在当前组件处理完毕的事件,坚决不往父组件传【多层传参一旦状态改变，层数越多,越复杂】

 

在Vue的框架中，组件传参是非常复杂的！

 

组件传参的一些情况：

父向子 ---- props单向传参【兼容uni-app和纯Vue】

子向父----$emit和$on发射和接收事件参数【兼容uni-app和纯Vue】

祖辈向孙子----模拟父向子一层一层的单向传参【兼容uni-app和纯Vue】

【非常重要且常用】孙子向祖辈---因为$emit仅支持子向父传参,所以可以模拟子向父逐级传

兄弟之间或其他没关系的传参----Vue的官方文档目前没有解决方案【除Vuex以外】

Vue的组件传参总结：除了父子关系或可以模拟父子关系的传参以外，其他组件传参只能使用Vue-bus或Vuex，而Vue-bus适用于比较简单的组件传参，而Vuex适用于比较复杂的多组件传参

 

特别注意：vue-bus有一个不足的地方，由于一个组件的事件名称是一样的，所以如果一个页面同时使用这个组件多次，就会导致事件监听无法区分是那个组件的事件【这个可以是说中央事件的一个bug】

 

推荐两篇文章【完全可以解决组件传参的各种情况】

uni-app 全局变量的几种实现方式【Vuex，Vue.prototype、公共文件】【多组件传参且改变html元素状态时Vuex优先】：https://blog.csdn.net/weixin_43343144/article/details/91875821

vue组件之间的通信 vue-bus和vuex：https://blog.csdn.net/lyc2786161648/article/details/88586029

 

总结：但是我们在使用uni-app框架【app和小程序不完全兼容Vue】：

props---父向子传参【单向传参，不可以修改，完美兼容】

$emit,$on --仅支持一层的子向父传参【完美兼容】

Vue-bus----任意组件传参----适合比较简单的多组件传参【完美兼容】

Vuex----任意组件传参----适合复杂的多组件传参【完美兼容】

注：还有全局变量Vue.prototype或Vuex了，其他传参方式在uni-app框架中不太友好！