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. Nginx Install 记录

    一.安装编译工具及库文件 yum -y install gcc yum -y install gcc-c++ yum -y install zlib; yum -y install pcre-deve ...

  2. B/S的学习

    一. B/S的概念 B/S(Brower/Server,浏览器/服务器)模式又称B/S结构,是Web兴起后的一种网络结构模式.Web浏览器是客户端最主要的应用软件. 这种模式统一了客户端,将系统功能实 ...

  3. ajax 防止重复提交

    参考链接:http://www.hollischuang.com/archives/931 http://blog.csdn.net/everything1209/article/details/52 ...

  4. mika的模板库

    二分图最大匹配: 1.匈牙利算法:注意dfs中是dfs(c[w[i]]),搜索的是与之匹配的点. #include<cstdio> #include<cstring> ],w[ ...

  5. IP通信基础学习第七周（下）

    H3C的配置指令包括:基本配置,查看指令,接口配置. 基本配置包括:查看可用指令:进入系统视图,全局配置模式:给设备命名:退回上一层模式:直接退回到用户模式. 查看指令包括:显示设备系统版本信息:显示 ...

  6. react context跨组件传递信息

    从腾讯课堂看到的一则跨组件传递数据的方法,贴代码: 使用步骤: 1.在产生参数的最顶级组建中,使用childContextTypes静态属性来定义需要放入全局参数的类型 2.在父组件中,提供状态,管理 ...

  7. jdbc笔记(二) 使用PreparedStatement对单表的CRUD操作

    首先声明,本文只给出代码,并不是做教程用,如有不便之处,还请各位见谅. PreparedStatement相较于Statement,概括来说,共有三个优势: 1. 代码的可读性和易维护性:Prepar ...

  8. 3、SpringBoot 集成Storm wordcount

    WordCountBolt public class WordCountBolt extends BaseBasicBolt { private Map<String,Integer> c ...

  9. 使用nginx代理kibana并配置登录验证

    由于kibana不支持登录验证,谁都可以访问,放到公网就不合适了,这里配置用nginx进行代理: 生成密码文件 如果安装了httpd可以用htpasswd,比较方便: htpasswd -c /roo ...

  10. linux /dev/mapper/centos-root目录莫名其妙被占满

    shell命令df -h查看磁盘占用情况,发现/dev/mapper/centos-root莫名其妙被沾满: 这是因为,系统有文件被删除,而进程还活着,因而造成还占用空间的现象.1.使用lsof |g ...