我说这是全网最全vue组件通信方式

prop

event

style和class

natvie修饰符

$listeners

v-model

sync修饰符

$parent 和 $children

$slots 和 $scopedSlots

ref

最常见的组件通信方式，由父组件向子组件传递。prop可接收一个数组或对象

子组件向父组件发送通知，并传递参数

子组件

父组件

父组件可以向子组件传递style 和 class ，style 和 class将合并到子组件根元素上

父组件

子组件

最终渲染结果

父组件在使用子组件时，在子组件上定义一些属性，这些属性将作用于子组件的根元素上，但是不包括style和class

父组件

子组件

最终渲染结果

Tip：子组件可以通过定义 inheritAttrs：false 来紧张 attribute 附着在子组件根元素上 但不影响通过 $attrs 获取数据

在注册事件时，父组件可以通过 navite 修饰符，将事件注册到子组件根元素上

父组件

子组件

子组件可以通过 $listeners 获取父组件传递过来的所有处理函数

父组件在使用子组件时，可以在子组件上绑定v-model，子组件通过定义model的prop和event还获取父组件定义的值

父组件

<compn v-model=" "datas" />

子组件

和 v-model类似，用于双向数据绑定，不同点在于 v-model只能针对一个数据进行绑定，而 sync 修饰符没有限制

子组件

父组件

在组件内部，可以通过$parent 和$children属性，分别获取当前组件的父组件和子组件实例

ref

在使用组件时，可以通过在组件上定义ref来获取组件实例

provide和inject 可以实现深层组件通信，顶层组件只需定义provide，底层组件通过inject接受数据

顶层组件

如果一个组将改变了地址栏，所有监听地址栏的组将都会做出相应的改变，

vuex 过于笨重，通常不建议在小型项目中使用，小型项目可以使用store 或 eventbus代替vuex，vuex本质上就是一个数据仓库。在此不做过多赘述，先挖一个坑，下回再叙。

store模式其实就是一个普通的js模块，各组件可以导入该模块，将数据放到data里面，此时store就具有响应式了。

tip: store模式的缺点是无法跟踪数据的改变，因为所有组件都可以更改数据

在父组件页面使用 v-bind: 或 : 将数据传递给子组件，子组件通过 props 获取父组件传递过来的值。

多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。但如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点大材小用。为此Vue24 版本提供了另一种方法---- $attrs ；

示例：

我们向子组件son传递5个属性，再由子组件son向孙子组件grandson传递4个属性（这4个组件不做任何处理，只是传递），son组件向grandson组件传递的那4个属性就可以使用 v-bind=$attrs 。

通常和 $attrs 配合使用。

简单来说，使用 interitAttrs: false 子组件的$attrs不会被当做是html属性渲染到根元素上，防止修改html同名属性。

在子组件页面使用 this$emit('自定义事件名', 数据); 将数据传递给父组件，父组件通过 @自定义事件名="事件处理方法名" 或者 v-on:自定义事件名="事件处理方法名" 获取子组件传递过来的值。

若公共组件被很多组件调用且抛出的自定义事件都不同，此时就可以使用 $listeners ；根据父组件调用的事件去决定抛出哪个自定义事件。

EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。 更多EventBus

vuex官网

Vuex实现了一个单向数据流，在全局拥有一个State存放数据，当组件要更改State中的数据时，必须通过Mutation进行，Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。而当所有异步 *** 作(常见于调用后端接口异步获取更新数据)或批量的同步 *** 作需要走Action，但Action也是无法直接修改State的，还是需要通过Mutation来修改State的数据。最后，根据State的变化，渲染到视图上。

provide / inject 官网介绍

vue220 新增API，这对选项需要一起使用， 以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效 。如果你熟悉 React，这与 React 的上下文特性很相似。

provide / inject API 主要解决了跨级组件间的通信问题。 官网提供了很详细的介绍，这里直接上图

由图8-1可知， this$children 获取到的是一个vue实列数组

由图8-2可知， this$parent 获取到的是直接父实例

由图8-3可知， this$refs 返回的是一个使用ref注册过的对象

sessionStorage、localStorage也能实现通信，但是需要监听storage的变化，如何监听storage的变化，之前有写过这篇文章 vue 监听localStorage、sessionStorage变化 ，这里就不赘述了。

vue组件间通信的六种方式

commit: 同步 *** 作

this$storecommit('方法名',值)存储

this$storecommit('newBankName', thistextValue)

this$storestate方法名取值

dispatch: 异步 *** 作

this$storedispatch('方法名',值)存储

this$storegetters方法名取值

当 *** 作行为中含有异步 *** 作，比如向后台发送请求获取数据，就需要使用action的dispatch去完成了。

其他使用commit即可。

其他了解：commit=>mutations,用来触发同步 *** 作的方法。

dispatch =>actions,用来触发异步 *** 作的方法。在store中注册了mutation和action，在组件中用dispatch调用action，然后action用commit调用mutation，

Getter 会暴露为 storegetters 对象，你可以以属性的形式访问这些值：

在ajax回掉中添加callback;

methods:{

callback:function(_this){

consolelog(_this)

}

ajax回掉:function(){

thiscallback(this)

}

}

Vuex 是一个专为 Vuejs 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

如果一份数据需要在多个组件中使用，组件间传值又比较复杂，就可以使用vuex托管数据。

state选项： 定义状态（状态就是数据）。

mutations选项： 定义修改状态的方法（注意：这里面只能定义同步方法）。

$store： 返回的是当前项目中的全局状态对象。

commit()方法： 用于执行指定的mutations里面的方法。

在组件中，直接通过$storestate就可以获取到全局状态对象管理的状态数据，直接渲染到页面。

state选项： 定义状态（状态就是数据）。

通过 $storestate数据名 使用。

getters选项： 定义计算属性。方法的参数是状态对象。

通过 $storegetters属性名 使用计算属性。

mutations选项： 定义修改状态的方法（注意：这里的方法一般都是同步方法）。方法的第一个参数是状态对象，第二个参数是新值。

通过 commit() 方法，调用mutations里面的方法。

actions选项： 定义 *** 作状态的方法（这里的方法可以定义异步方法）。

注意： actions里的方法最好不要直接 *** 作state状态，而是通过调用mutations里面的方法去修改状态。所以，actions直接 *** 作的是mutations。

通过 dispatch() 方法，调用actions里面定义的方法。

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。

namespaced属性： 默认情况下，action、mutation 和 getter 是注册在全局命名空间的。通过设置namespaced属性为true，将action、mutation 和 getter全部注册到私有命名空间中。

要从私有模块中获取数据，方式是： $storestate模块名称模块的数据 。

要从私有模块中获取计算属性，方式是： $storegetters['模块名/计算属性'] 。

调用私有模块里面的mutations定义的方法，方式是： $storecommit('模块名/方法名',新值) 。

调用私有模块里面的actions定义的方法，方式是： $storedispatch('模块名/方法名',新值) 。

直接在模板中使用全局状态管理数据，表达式会写的很长。所以可以使用计算属性。

通过映射函数mapState、mapGetters、mapActions、mapMutations，可以将vuexstore中的属性映射到vue实例身上，这样在vue实例中就能访问vuexstore中的属性了，便于 *** 作vuexstore。

如果vuex里面state的数据名称 跟 页面中的计算属性名称相同，就可以使用 mapState 映射函数，自动生成页面中的计算属性。

如果vuex里面getters的数据名称 跟 页面中的计算属性名称相同，就可以使用 mapGetters 映射函数，自动生成页面中的计算属性。

注意： 如果要映射模块里面的state/getters，函数的第一个参数设置为模块的名称。

如果定义的方法名跟全局管理对象中mutations里面的方法名相同，并且定义的方法会带有一个参数，通过参数传递数据。满足该规则，就可以使用 mapMutations 映射函数生成方法。

如果定义的方法名跟全局管理对象中actions里面的方法名相同，并且定义的方法会带有一个参数，通过参数传递数据。满足该规则，就可以使用 mapActions 映射函数生成方法。

注意： 如果要映射私有模块中mutations/actions里面的方法，函数的第一个参数设置为模块的名称。

以上就是关于我说这是全网最全vue组件通信方式全部的内容，包括:我说这是全网最全vue组件通信方式、vue组件间通信、vuex存取值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！