1.父子级间通信，父类找子类非常容易，直接在子组件上加一个ref，父组件直接通过this.$refs操作子组件的数据和方法

   父

这边子组件中

就完成了父 => 子组件通信

2. 子 =>父组件间通信

父组件中，在子组件上绑定一个属性（:parent=‘this’） 名字都可以，子组件中用props接收父组件中传过来的parent属性，

子组件就可以直接调用父元素中的数据和方法了

 父组件

子组件中

3.上面两个例子已经完成了父子组件间通信了，但是耦合度非常高，如果父组件调用了子组件中不存在的方法就会报错，为了解决耦合度高的问题，

Vue引入了$emit和$on来解除父子级间通信的耦合度高的问题

利用this.$refs.c1.$emit（‘add’, num）向子组件发送请求，

子组件通过this.$on（‘add’, function(num）{}  来接收父组件发过来的数据，即使子组件不存在该方法也不会报错

Vue的父子组件间通信及借助$emit和$on解除父子级通信的耦合度高的问题的更多相关文章

  1. 第四节：Vue表单标签和组件的基本用法，父子组件间的通信

    vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...

  2. vue之父子组件间通信实例讲解(props、$ref、$emit)

       组件间如何通信,也就成为了vue中重点知识了.这篇文章将会通过props.$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信. 组件是 vue.js 最强大的功能之一,而组件实例 ...

  3. vue:父子组件间通信，父组件调用子组件方法进行校验子组件的表单

    参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...

  4. vue 和 react 组件间通信方法对比

    vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...

  5. vue组件定义方式，vue父子组件间的传值

    vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...

  6. React中父子组件间的通信问题

    1.https://blog.csdn.net/sinat_17775997/article/details/59103173 (React中父子组件间的通信问题)

  7. Vue—非父子组件间的传值（Bus/发布订阅模式/观察者模式/总线）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. vue仓库、组件间通信、前后台数据交互、前端储存数据大汇总

    目录 路由重定向 仓库介绍 vuex插件:可以完成任意组件间信息交互(移动端) 前端存储数据大汇总 前后台交互方式(重点) 前后台数据交互 axios插件:完成前后台ajax交互的 同源策略 - 前后 ...

  9. Vue2.0父子组件间事件派发机制

    从vue1.x过来的都知道,在vue2.0中,父子组件间事件通信的$dispatch和$broadcase被移除了.官方考虑是基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会 ...

随机推荐

  1. 记录心得-FastJson分层解析demo示例

    记录一下,平时用到,可速查!关键: // startArray(); 开始解析数组 // endArray(); 结束解析数组 // startObject(); 开始解析键值对 // endObje ...

  2. luogu P2327 [SCOI2005]扫雷

    很好的一道题,仔细思索(在y^3 dalao的帮助下)可以发现答案只有0 1 2三种情况 直接枚举第一位有没有雷,就可以递推了qwq 附上y^3大佬的blogs https://blog.csdn.n ...

  3. Linux基础命令---iostat显示设备状态

    iostat iostat指令用来显示cpu状态,系统IO设备的状态,以及相关磁盘和NFS使用状态.iostat命令通过观察设备相对于其平均传输速率的活动时间来监视系统输入/输出设备负载.iostat ...

  4. 数据分片一致性hash

    一致性hash 一致性hash是将数据按照特征值映射到一个首尾相接的hash环上,同时也将节点(按照IP地址或者机器名hash)映射到这个环上.对于数据,从数据在环上的位置开始,顺时针找到的第一个节点 ...

  5. centos7.4卸载再安装mariadb服务无法启动问题

    今天yum安装MariaDB完成后,启动服务时一直报以下错误 Job for mariadb.service failed. See ‘systemctl status mariadb.service ...

  6. kubernetes 开发 code-generator

    主要参考项目 https://github.com/kubernetes/code-generator 1. git clone https://github.com/kubernetes/code- ...

  7. .NET Framework简介

    NET Framework 就是微软Web Services 引擎1.NET Framework 旨在实现下列目标:提供一个一致的面向对象的编程环境,而无论对象代码是在本地存储和执行,还是在本地执行但 ...

  8. MTK-TP(触屏)解读一

    MTK中的TP代码结构并不复杂,相比于其他的系统更为的简单些.它使用的是input子系统,通过该系统来上报触摸按键. 首先我们来看看TP的文件夹下的各代码文件的功能. 文件名 具体功能 关系文件 tp ...

  9. Hadoop-Impala学习笔记之SQL参考

    参考:Apache Impala Guide--Impala SQL Language Reference. Impala使用和Hive一样的元数据存储,Impala可以访问使用原生Impala CR ...

  10. hiberate 映射关系 详解

    在我们平时所学的关系型数据库中,我们会大量处理表与表之间的关系,如果表比较多的话处理起来就比较繁琐了,但是hibernate给我们提供了很大的便利,这些便利让我们处理起来方便.我们所讲的源码地址:ht ...