Vue3和Vue2的组件通信方式，建议收藏

　　大佬镇楼
　　先来看看Vue3的几种组件通信方式：props $emit expose / ref $attrs v-model provide / inject Vuex
　　下面分别介绍这几种方式的写法：
　　1、props 父组件    子组件
　　2、$emit 父组件    子组件 
　　3、expose / ref 父组件    子组件
　　4、attrs 父组件    子组件
　　5、v-model 父组件(v-model可省略)    子组件 
　　6. provide / inject 父组件   子组件
　　接下来是Vue2.x 组件通信使用方法：
　　1、 props 父组件   子组件 export default {   props:{       msg:{           type:String,           default:＂这是默认数据＂       }   },   mounted(){       console.log(this.msg)   }
　　2、.sync 父组件 
　　3、v-model 父组件 
　　4、ref 子组件 export default {     data(){         return {             name:＂＂         }     },     methods:{         someMethod(msg){             console.log(msg)         }     } }  父组件 
　　5、$emit / v-on 子组件 export default {   data(){       return { msg: ＂这是发给父组件的信息＂ }   },   methods: {       handleClick(){           this.$emit(＂sendMsg＂,this.msg)       }   }, } 父组件   export default {     methods:{         getChildMsg(msg){             console.log(msg) // 这是父组件接收到的消息         }     } }
　　6、children/parent 父组件 export default{     mounted(){         this.$children[0].someMethod() // 调用第一个子组件的方法         this.$children[0].name // 获取第一个子组件中的属性     } }  子组件 export default{     mounted(){         this.$parent.someMethod() // 调用父组件的方法         this.$parent.name // 获取父组件中的属性     } }
　　7、EventBus // 方法一 // 抽离成一个单独的 js 文件 EventBus.js ，然后在需要的地方引入 // EventBus.js import Vue from ＂vue＂ export default new Vue()  // 方法二 直接挂载到全局 // main.js import Vue from ＂vue＂ Vue.prototype.$bus = new Vue()
　　8、Vuex （这个就不举例子了........懂的都懂！）
　　创作不易，你的关注就是我前进的动力！[奋斗][奋斗]