Vue组件之间通信的八种方式

klinson 发布于2019-08-23 16:55 / 989人阅读

摘要：使用也有很长一段时间但是一直以来都没对其组件之间的通信做一个总结这次就借此总结一下。引用信息将会注册在父组件的对象上。

使用Vue也有很长一段时间,但是一直以来都没对其组件之间的通信做一个总结,这次就借此总结一下。 父子组件之间的通信

1）props和$emit
父组件通过props将数据下发给props,子组件通过$emit来触发自定义事件来通知父组件进行相应的操作
具体代码如下:
    ```
        // 父组件
        
        
        
        


        // 子组件
        
        
        
    ```
2)vm.$parent和vm.$children
vm.$parent: 父实例,如果当前实例有的话
vm.$children: 获取当前实例的直接直接子组件,需要注意的是$children并不保证顺序,也不是响应式的
具体代码如下:
    ```
        // 父组件的代码
        
        
        
        // 子组件的代码
        
        
        
    ```
3)ref
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
具体代码如下:
    ```
        // 父组件
        
        
        
        // 子组件
        
        
          
    ```
4)自定义事件的v-model
https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model
具体代码如下:
    ```
        // 父组件
        
        
        
        // 子组件
        
        
        
    ```

祖先组件和其子孙组件通信

1)provide/inject
provide/inject,允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下文关系成立的时间里始终生效
https://cn.vuejs.org/v2/api/#provide-inject      
具体代码如下:
    ```
        // 父组件
        
        
        
        // 子组件
        
        
        
        // 孙组件
        
        
        
    ```
2)$attrs和$listeners
组件A下面有一个组件B,组件B下面有一个组件C,如果想将组件A的数据和自定义事件传递给组件C,就可以使用$attrs和$listeners。
vm.$attrs: 当一个组件没有声明任何 prop 时(没有在props声明属性)，这里会包含所有父作用域的绑定 ，并且可以通过 v-bind="$attrs" 传入内部组件
vm.$listeners: 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件。
https://cn.vuejs.org/v2/api/#vm-attrs
具体代码如下:
```
    // 父组件
    
    
    
    // 子组件
    
    
    
    // 孙组件
    ```
        
        
        

    ```
```

非父子组件之间的通信

通过中央事件总线来进行通信
通过新建一个Vue事件的bus对象,然后通过bus.$emit来触发事件,bus.$on监听触发的事件。使用中央事件总线时,需要在手动清除它,不然它会一直存在,原本只执行一次的操作,将会执行多次。
具体代码如下:
    ```
        // 父组件
        
        
        
        // one组件
        
        
        
        // two组件
        
        
        
        // index.js 创建的bus
        import Vue from "vue";
        export const BUS = new Vue({
        }) 
    ```

通过vuex来进行数据管理,具体内容见vuex官网 如果有什么不对的地方,或者还有什么方法我没有写到,希望大家可以提出来,谢谢。

云服务器 idc机房托管组件之间通信 vue组件 vue组件开发 vue父子组件通讯

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103504.html

Docker的八种用途

摘要：目前能够有以下八种用途简化配置这是初始目的，虚拟机最大的好处是基于你的应用配置能够无缝运行在任何平台上。实现应用之间的解耦，将多个应用服务部署在多个中能轻松达到这个目的。 Docker 提供轻量的虚拟化，你能够从Docker获得一个额外抽象层，你能够在单台机器上运行多个Docker微容器，而每个微容器里都有一个微服务或独立应用，例如你可以将Tomcat运行在一个Docker，而MySQ...

lindroid 2019-06-28 15:17 评论0 收藏0
Java常用的八种排序算法与代码实现精解

摘要：直接插入排序的算法重点在于寻找插入位置。也称缩小增量排序，是直接插入排序算法的一种更高效的改进版本。希尔排序是非稳定排序算法。简单选择排序常用于取序列中最大最小的几个数时。将新构成的所有的数的十位数取出，按照十位数进行排序，构成一个序列。 1.直接插入排序直接插入排序算法是排序算法中最简单的，但在寻找插入位置时的效率不高。基本思想就是将一个待排序的数字在已经排序的序列中寻找找到一个插...

2501207950 2019-08-14 18:07 评论0 收藏0
简述Java内存模型

摘要：内存模型即，简称，其规范了虚拟机与计算机内存时如何协同工作的，规定了一个线程如何和何时看到其他线程修改过的值，以及在必须时，如何同步访问共享变量。内存模型要求调用栈和本地变量存放在线程栈上，对象存放在堆上。 Java内存模型即Java Memory Model，简称JMM，其规范了Java虚拟机与计算机内存时如何协同工作的，规定了一个线程如何和何时看到其他线程修改过的值，以及在必须时，...

ACb0y 2019-08-15 15:48 评论0 收藏0
八种常见排序算法细讲

摘要：目录常见的八种排序常见的八种排序直接插入排序直接插入排序希尔排序希尔排序直接选择排序直接选择排序堆排序堆排序冒泡排序冒泡排序快速排序快速排序版本版本挖坑法挖坑法前后指针版前后指针版快速排序代码目录常见的八种排序直接插入排序希尔排序直接选择排序堆排序冒泡排序快速排序 hoar...

hiyang 2021-11-17 09:33 评论0 收藏0
2018年，前端应该怎么学？

摘要：未来一个大的趋势就是前端开发的效果，正无限逼近原生效果同时一些大厂也在纷纷提前布局了，之前惊艳四方的天猫造物节淘宝造物节风靡朋友圈的怎么做的如果我们要在这波浪潮上取得先机，那么就必须提前学习。我个人想学习的框架是天猫的。面向2018年，我觉得前端有这么三个方向可以突破前端逻辑层（包括三大框架，webpack，前端数据管理）前端交互层（包括css3，canvas，svg，vr...

AnthonyHan 2019-08-22 11:18 评论0 收藏0