1.组件间通信的概念在开始之前，我们拆分了组件间通信这个词。我们都知道组件是Vue最强大的功能之一，vue中的每一个.vue都可以看作是一个组件。通信是指发送者通过一定的媒介，以一定的格式向接收者传递信息，以达到一定的目的。从广义上讲，任何信息的通信都是组件之间的通信，即组件（.vue）以一定的方式传递信息，以达到一定的目的。比如我们在UI框架中使用的是table组件，可能会调用到table组件。传入一些数据，这个本质就形成了组件之间的通信。2、组件之间的通信解决什么问题？对于信息传输，在科学技术飞速发展的今天，通信基本是通过有线或无线电完成的，出现了有线电话、座机电话、无线电话、手机、互联网甚至可视电话等多种通信方式。一个接一个。简而言之，我们可以看出通信的本质是信息同步，共享回vue，每个组件都有自己的作用域，组件之间的数据是不能共享的，但是在实际开发工作中，我们往往需要让Components共享数据，这也是组件通信的目的。使它们能够相互交流，形成一个有机的、完整的系统。2.组件间通信的分类组件间通信的分类可分为以下几类父子组件间通信兄弟组件间通信祖父母与后代组件间通信非关系型组件间通信图：##3.通信方案组件之间vue中8种常规通信方案通过props通过$emit触发自定义事件使用refEventBus$parent或$rootattrs和listenersProvide和InjectVuex###props传递数据适用场景：父组件传递数据给子组件子组件设置props属性，定义父组件接收父组件传递的参数children.vueprops:{//Stringformname:String//接收类型参数//Objectformage:{type:Number,//接收到的类型是一个值defaule:18,//默认值为18require:true//必须传递age属性}}Father.vuecomponent###$emit触发自定义事件适用场景：子组件传递数据为父组件触发自定义事件和通过$emit调用子组件，$emit的第二个参数就是传入的值。父组件绑定监听器获取子组件传过来的参数Chilfen.vuethis.$emit('add',good)Father.vue###ref父组件在使用子组件时设置ref父组件父组件通过设置子组件refComponentthis.$refs.foo//获取子组件实例，我们可以通过子组件实例获取对应的数据###EventBus使用场景：兄弟组件传值创建一个中心时间总线EventBus的兄弟组件，通过$emit触发自定义事件，$emit的第二个参数就是传入的值。另一个兄弟组件通过$onBus.js监听自定义事件//创建一个中心时间总线类classBus{constructor(){this.callbacks={};//存储事件的名称}$on(name,fn){this.callbacks[name]=this.callbacks[name]||[];this.callbacks[名称].push(fn);}$emit(name,args){if(this.callbacks[name]){this.callbacks[name].forEach((cb)=>cb(args));}}}//main.jsVue.prototype.$bus=newBus()//挂载$bus到vue实例的原型上//另一种方式Vue.prototype.$bus=newVue()//Vue已经实现了BusChildren1.vuethis.$bus.$emit('foo')Children2.vuethis.$bus.$on('foo',this.handle)###$parentor$root建立通信关联的函数共同祖先$parent或$root兄弟组件this.$parent.on('add',this.add)另一个兄弟组件this.$parent.emit('add')###$attrs和$listeners适用场景：祖先将数据传递给后代设置批次传递属性$attrs和$lisTeners包含在父作用域中不被识别（和获取）为props的特性绑定（除了class和style），可以通过v-bind="$attrs"//child:notinpropsDeclarefoo传递给内部组件
{{$attrs.foo}}
//parent
//代代传值给孙子，communication/index.vue
//Child2确实扩展//Grandson使用{{msg}} ###provideandinject在祖先组件中定义provide属性，在后代组件中返回传递的值component通过inject接收组件传递的值Ancestorcomponentprovide(){return{foo:'foo'}}Descendantcomponentinject:['foo']//获取祖先组件传递的值###适用场景vuex：复杂关系组件数据传输vuex等价于通知用于存储共享变量的容器状态。状态用于存储共享变量。getter可以添加一个getter派生状态（相当于存储中的计算属性）来获取共享变量的值mutations用于存储和修改状态的方法。动作也用于存储和修改状态，但动作是在突变的基础上执行的。经常用来做一些异步操作###总结一下父子关系的组件数据传递，选择props和$emit来传递，或者ref兄弟关系的组件数据传递选择$bus，然后选择$parent来传递transferancestoranddescendantcomponents数据传输可以选择attrs和listeners或者ProvideandInject复杂关系组件数据传输可以通过vuex存储共享变量##参考https://juejin.cn/post/684490...https://zh.维基百科。org/wiki...https://vue3js.cn/docs/zh@JS语音社区
