Vue中如何实现组件间通信-创新互联

在平时的开发过程中,父子 / 兄弟组件间的通信是肯定会遇到的啦,所以这里总结了 6 种 Vue 组件的通信props / $e$emit / Vuex$attrs / $listeners

在哈巴河等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供网站设计制作、网站建设 网站设计制作定制开发,公司网站建设,企业网站建设,品牌网站建设,成都营销网站建设,外贸营销网站建设,哈巴河网站建设费用合理。
  1. $parent / $children 与 ref

  2. provide / inject

前言

Vue中如何实现组件间通信

如上图所示,A/B,B/C,B/D 组件是父子关系,C/D 是兄弟关系。那如何根据不同的使用场景,选择不同的通信方式呢?所以前提就是我们要了解不同的通信方式的作用和区别。

一. props / $emit

这个是我们平时用得比较多的方式之一,父组件 A 通过 props 参数向子组件 B 传递数据,B 组件通过 $emit 向 A 组件发送一个事件(携带参数数据),A组件中监听 $emit 触发的事件得到 B 向 A 发送的数据。 我们来具体解释下它的实现步骤:

1:父组件向子组件传值

// App.vue 父组件

2:子组件向父组件传值(通过事件方式)

// 子组件

二. $emit / $on

这种方式是通过一个类似 App.vue 的实例作为一个模块的事件中心,用它来触发和监听事件,如果把它放在 App.vue 中,就可以很好的实现任何组件中的通信,但是这种方法在项目比较大的时候不太好维护。

举个: 假设现在有 4 个组件,Home.vue 和 A/B/C 组件,AB 这三个组件是兄弟组件,Home.vue 相当于父组件 建立一个空的 Vue 实例,将通信事件挂载在该实例上 -

D.js
import Vue from 'vue'export default new Vue()
// 我们可以在router-view中监听change事件,也可以在mounted方法中监听
// home.vue
// A组件

// B组件

// C组件

上面的里我们可以知道,在 C 组件的 mounted 事件中监听了 A/B 的 $emit 事件,并获取了它传递过来的参数(由于不确定事件什么时候触发,所以一般在 mounted / created 中监听)

三. Vuex

Vuex 是一个状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 Vuex 应用的核心是 store(仓库,一个容器),store 包含着你的应用中大部分的状态 (state);

这个部分就不详细介绍了,官方文档很详细了 vuex.vuejs.org/zh/guide/st…

四. $attrs / $listeners

Vue中如何实现组件间通信

如上图所示,这是一个多级组件的嵌套,那 A/C 组件如何进行通信?我们现在可以想到的有下面几种方案:

  1. 使用 Vuex 来进行数据管理,但是使用的 vuex 的问题在于,如果项目比较小,组件间的共享状态比较少,那用 vuex 就好比杀鸡用牛刀。
  2. 利用 B 组件做中转站,当 A 组件需要把信息传给 C 组件时,B 接受 A 组件的信息,然后用 props 传给 C 组件, 但是如果嵌套的组件过多,会导致代码繁琐,代码维护比较困难;如果 C 中状态的改变需要传递给 A, 还要使用事件系统一级级往上传递 。

在 Vue2.4 中,为了解决该需求,引入了attrs和listeners , 新增了inheritAttrs 选项。(如下图所示)

Vue中如何实现组件间通信

$attrs 的作用,某些情况下需要结合 inheritAttrs 一起使用

有 4 个组件:App.vue / child1.vue / child2.vue / child3.vue,这 4 个组件分别的依次嵌套的关系。

// App.vue

// child1.vue

// child2.vue

// child3.vue

来看下具体的显示效果:

Vue中如何实现组件间通信

而$listeners怎么用呢,官方文档说的是:包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用! 从字面意思来理解应该是在需要接受值的父组件增加一个监听事件?话不多说,上代码

还是 3 个依次嵌套的组件


复制代码

复制代码
// child3.vue

复制代码

这里的结果是,当我们点击 child3 组件的 child3 文字,触发 startUpRocket 事件,child1 组件就可以接收到,并触发 reciveRocket 打印结果如下:

> reciveRocket success
> startUpRocket

五. $parent / $children 与 ref

  • ref:如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例
  • $parent / $children:访问父 / 子实例

这两种方式都是直接得到组件实例,使用后可以直接调用组件的方法或访问数据。

我们先来看个用 ref 来访问组件的:

// child1子组件
export default {  
        data() {    
            return {
      title: 'Vue.js'
    };
  },
  methods: {    
      sayHello() {
      console.log('child1!!');
    }
  }
};
// 父组件

六. provide/inject

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

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

由于自己对这部分的内容理解不是很深刻,所以感兴趣的可以前往官方文档查看: cn.vuejs.org/v2/api/#pro…

总结

常见使用场景可以分为三类:

  1. 父子通信:props / $emit;$parent / $children;$attrs/$listeners;provide / inject API; ref
  2. 兄弟通信:Vuex
  3. 跨级通信:Vuex;$attrs/$listeners;provide / inject API

以上就是Vue组件通信的六种方式的详细内容,更多请关注创新互联成都网站设计公司其它相关文章!

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


分享文章:Vue中如何实现组件间通信-创新互联
标题链接:http://pwwzsj.com/article/dphpso.html