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

　　大佬镇楼
　　先来看看Vue3的几种组件通信方式：propsemitexposerefattrsvmodelprovideinjectVuex
　　下面分别介绍这几种方式的写法：
　　1、props父组件child：msg2msg2child子组件
　　2、emit父组件templatebuttonclickhandleClick按钮buttomtemplate子组件templatechildmyClickonMyClickchildtemplate
　　3、exposeref父组件templatechildrefcompchildbuttonclickhandlerClick按钮buttontemplate子组件
　　4、attrs父组件child：msg1msg1：msg2msg2child子组件
　　5、vmodel父组件（vmodel可省略）childvmodel：keykeyvmodel：valuevaluechild子组件templatebuttonclickhandlerClick按钮buttontemplate
　　6。provideinject父组件子组件
　　接下来是Vue2。x组件通信使用方法：
　　1、props父组件templatechild：msgmsgchildtemplate子组件exportdefault｛props：｛msg：｛type：String，default：这是默认数据｝｝，mounted（）｛console。log（this。msg）｝
　　2、。sync父组件templatechild：page。syncpagechildtemplate
　　3、vmodel父组件templatechildvmodelvaluechildtemplate
　　4、ref子组件exportdefault｛data（）｛return｛name：｝｝，methods：｛someMethod（msg）｛console。log（msg）｝｝｝父组件templatechildrefchildchildtemplate
　　5、emitvon子组件exportdefault｛data（）｛return｛msg：这是发给父组件的信息｝｝，methods：｛handleClick（）｛this。emit（sendMsg，this。msg）｝｝，｝父组件templatechildvon：sendMsggetChildMsgchild或简写childsendMsggetChildMsgchildtemplateexportdefault｛methods：｛getChildMsg（msg）｛console。log（msg）这是父组件接收到的消息｝｝｝
　　6、childrenparent父组件exportdefault｛mounted（）｛this。children〔0〕。someMethod（）调用第一个子组件的方法this。children〔0〕。name获取第一个子组件中的属性｝｝子组件exportdefault｛mounted（）｛this。parent。someMethod（）调用父组件的方法this。parent。name获取父组件中的属性｝｝
　　7、EventBus方法一抽离成一个单独的js文件EventBus。js，然后在需要的地方引入EventBus。jsimportVuefromvueexportdefaultnewVue（）方法二直接挂载到全局main。jsimportVuefromvueVue。prototype。busnewVue（）
　　8、Vuex（这个就不举例子了。。。。。。。。懂的都懂！）
　　创作不易，你的关注就是我前进的动力！〔奋斗〕〔奋斗〕