当前位置： 首页 > 科技观察

vue组件间通信的六种方式（完整版）

时间：2023-03-14 17:04:29 科技观察

【.com原稿】前言组件是vue.js的强大功能之一，组件实例的作用域相互独立，也就是说不同的组件之间的数据不能相互引用。一般来说，组件可以有如下关系：如上图所示，A和B，B和C，B和D都是父子关系，C和D是兄弟关系，A和C是代际关系（可能是多代）。如何针对不同的使用场景选择有效的沟通方式？这就是我们要讨论的主题。本文总结了props、$emit/$on、vuex、$parent/$children、$attrs/$listeners和provide/inject等vue组件之间的几种通信方式，并用通俗易懂的例子说明了区别以及使用场景，希望对小伙伴们有所帮助。本文代码请戳github博客。纸上谈兵太肤浅了。让我们做更多的代码！方法一、props/$emit父组件A传递props给子组件B，B传递给A是通过B组件中的$emit和A组件中的v-on来实现的。1.父组件传值给子组件接下来我们用一个例子来说明父组件是如何给子组件传值的：如何在子组件Users中获取父组件App.vue中的数据users.vue:["Henry","Bucky","Emily"]//App.vue父组件exportdefault{name:'HelloWorld',props:{users:{//这是父组件中的子标签自定义名称type:Array,required:true}}}总结：父组件传递数据通过道具向下到子组件。注：组件中数据的三种形式：data、props、computed2。子组件向父组件传递值（通过事件形式）。下面我们用一个例子来说明子组件是如何给父组件传值的：当我们点击“Vue.jsDemo”时，子组件给父组件传一个值，文字由原来的“传值”变成”到“子组件传值给父组件”，实现子组件传值给父组件。//子组件//父组件总结：子组件通过事件向父组件发送消息，实际上是子组件向父组件发送自己的数据。方法二、$emit/$on该方法使用一个空的Vue实例作为中央事件总线（eventcenter），用它来触发事件和监听事件，巧妙轻量的实现任何组件之间的通信，包括父子组件，兄弟，越级。当我们的项目比较大的时候，可以选择比较好的状态管理方案vuex。1、具体实现方法：varEvent=newVue();Event.$emit(事件名称,数据);Event.$on(事件名称,数据=>{});2.例如：有3个兄弟组件，分别是A、B、C，C组件如何获取A或B组件的数据

一个组件：{{name}}

发送数据到C组件

B组件：{{age}}

B组件：{{age}}

为C组件发送数组

C组件：{{name}},{{age}}

方法三、Vuex1.简单介绍Vuex的原理Vuex实现了一个单向数据流，有一个State来全局存储数据，当一个组件想要改变State中的数据时，必须通过Mutation来完成，Mutation也提供了订阅者模式，供外部插件调用获取State数据updates.当所有的异步操作（常见于调用后端接口异步获取更新数据）或者批量同步操作需要使用Action，但是Action不能直接修改State，或者需要通过Mutation修改State数据时。根据变化State,renderedtotheview.2.Brief介绍pr中各个模块的功能ocess:VueComponents:Vue组件。在HTML页面上，它负责接收用户操作等交互行为，并执行dispatch方法触发相应的action进行响应。dispatch：操作行为触发方法，是可以执行动作的方法。actions：操作行为处理模块，由组件中的$store.dispatch('actionname',data1)触发。然后commit()用于触发突变调用并间接更新状态。负责处理VueComponentsBehavior接收到的所有交互。包含同步/异步操作，支持多个同名方法，按注册顺序依次触发。向后台API请求的操作在该模块中执行，包括触发其他操作和提交突变。该模块提供Promise封装以支持动作的链式触发。commit：状态改变提交操作方法。Committingmutation是一种可以执行mutation的方法。mutations：状态改变操作方法，由actions中的commit('mutationname')触发。这是Vuex修改状态的推荐方式。该方法只能执行同步操作。运行过程中会暴露一些hook，用于状态监控等。state：页面状态管理容器对象。将数据对象的分散数据集中存放在Vue组件中，统一状态管理。页面显示所需的数据就是从这个对象中读取的，利用Vue细粒度的数据响应机制进行高效的状态更新。getters：状态对象的读取方法。该模块未在图中单独列出，应包含在render中。VueComponents通过这个方法读取全局状态对象。3、Vuex和localStorageVuex是Vue的状态管理器，存储的数据是响应式的。但是不会保存，刷新后会回到初始状态。具体方法应该是当vuex中的数据发生变化时，将数据复制一份保存到localStorage中。刷新后，如果localStorage中有保存的数据，则取出并替换。商店里的状态。letdefaultCity="Shanghai"try{//用户关闭了本地存储功能。这时候在外层添加一个try...catchif(!defaultCity){defaultCity=JSON.parse(window.localStorage.getItem('defaultCity'))}}catch(e){}exportdefaultnewVuex.Store({state:{city:defaultCity},mutations:{changeCity(state,city){state.city=citytry{window.localStorage.setItem('defaultCity',JSON.stringify(state.city));//当数据改变时,复制数据保存到localStorage}catch(e){}}}})这里需要注意的是：在vuex中，我们保存的state是一个数组，而localStorage只支持字符串，所以需要使用JSON转换：JSON.stringify(state.subscribeList);//array->stringJSON.parse(window.localStorage.getItem("subscribeList"));//string->array方法四、$attrs/$listeners一、介绍当多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。但是如果只是传递数据而不做中间处理的话，用vuex来处理就有点大材小用了。本次Vue2.4版本提供了另一种方法。当一个组件没有声明任何props时，它会包含所有的父作用域绑定（除了class和style），并且可以通过v-bind="$attrs"传入内部组件。通常与interitAttrs选项一起使用。//demo.vue