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

小咪咪 2021-09-20 02:42 145阅读 0赞

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

## ##

### **在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][https_blog.csdn.net_weixin_43343144_article_details_91875821]

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

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

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

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

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

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

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

[https_blog.csdn.net_weixin_43343144_article_details_91875821]: https://blog.csdn.net/weixin_43343144/article/details/91875821
[https_blog.csdn.net_lyc2786161648_article_details_88586029]: https://blog.csdn.net/lyc2786161648/article/details/88586029