vue中组件之间相互通信传值的几种方法详解

目录

• vue中组件之间相互通讯传值的方式
• 1、子组件和父组件通讯，通过调用父组件给组件自定义属性值来实现
• 2、父组件主动获取子组件数据
• 3、使用provide/inject方法实现
• 4、使用事件总线
• 5、vuex\localStorage\sessionStorage
• 总结

vue中组件之间相互通讯传值的方式

我们在使用vue进行项目开发的时候为了更好地管理项目，我们会把每个功能封装成一个个的组件，在使用的时候直接引入并且调用组件来实现代码的复用。

我们在封装组件的时候经常会留有一些预留的接口，供使用的时候调用和传入不同的数据，这个时候我们就涉及到了组件之前的相互传值的问题。

我这里总结了在vue中组件之前相互传值的方法：

1、子组件和父组件通讯，通过调用父组件给组件自定义属性值来实现

上边的代码展示了两种不同形式的组件之间的通讯方式，父组件传值方式相同，子组件获取操作方式不同

1.props/$emit组合方式：子组件通过定义props值拿到父组件传给子组件的属性来获取；子组件通过使用$emit方法调用父组件的方法；

2.$attrs/$listeners组合方式：子组件可以通过$attrs属性中的值拿到父组件传给子组件的属性值，它里边存储的是props之外的属性值；

3.$parent方法获取父组件中的数据和方法

2、父组件主动获取子组件数据

1.ref/$refs方式，通过给引入的组件定义一个ref属性，然后就可以通过$refs结合该属性值得到当前组件的实例

2.ref/$children属性，给组件定义ref值后，当前组件实例中会在this.$children中拿到所有定义了ref的组件数组，我们在通过下标进行获取某个子组件的方法后者属性值。

3、使用provide/inject方法实现

这种方式适合层级比较深的组件传值，这里的基本原理是，通过给祖先组件配置provide属性，然后把想要传给后代组件的属性值，进行存储；
然后在后代组件中，那个需要拿到传播的数据，可以给组件本身配置injuct属性，来接收想要监听的数据值；

然后就可以进行通信了

4、使用事件总线

此方发可以在任意组件中进行监听当前定义的方法。来实现，组件间相互通信

import Vue from 'vue';
// 这里从创建了一个新的vue实例对象
export const EventBus = new Vue();

事件总线的调用方式是:

1.定义一个全局的vue示例并导出;

2.然后在需要监听某个事件的组件中引入event-bus

3.给当前的组件在created方法中增加方法

4.然后子组件可以通过引入event-bus文件然后通过EventBus.$emit方式执行监听的时间方法

5、vuex\localStorage\sessionStorage

还可以使用Vuex、本地存储等方式来实现全局公用。

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!