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. Java获取项目根目录等其他系统属性

    一 相对路径的获得 说明:相对路径(即不写明时候到底相对谁)均可通过以下方式获得(不论是一般的java项目还是web项目) String relativelyPath=System.getProper ...

  2. web接口文档apidoc的使用

    1.安装 npm install apidoc -g 2.新建src文件夹,里面放2个文件,test.js和apidoc.json 3.test.js /** * @api {get} /query_ ...

  3. Typora学习笔记

    Typora学习笔记 标题 用"#"表示 快捷键:ctrl+1,2,3,4,5 居中 居中可用center标签 强调 使用强调 加粗 使用加粗 下划线 使用u标签:下划线 有序列表 ...

  4. CentOS7操作Redis4.0

    单机安装 1. 从官网下载 redis-4.0.10.tar.gz 到本地,然后上传到VMware虚拟机上,存放地址随意. 2. 解压: tar -zxvf redis-4.0.10.tar.gz 3 ...

  5. window 10 删除带有管理员权限的Oracle文件夹

    因为文件已经被删除就不附图解释了 因为文件安装的方式错误,所以本是按照正常步骤卸载Oracle,前面的禁用Orace服务与删除Oracle注册表都没有出错,但到最后一步---------Oracle文 ...

  6. 010 Editor Mac安装教程

    010 Editor mac版是mac上一款非常强大的十六进制编辑器,可以帮助用户进行编辑十六进制和二进制,可选择自己需要的进制进行编辑,还可对任何的文件进行编辑:软件内置了强大的模块.脚本操作,只需 ...

  7. nginx rewrite (转发)

    1.location正则写法 一个示例: location = / { # 精确匹配 / ,主机名后面不能带任何字符串 [ configuration A ] } location / { # 因为所 ...

  8. mysqldiff差异比较

    1.安装mysql-utilities[root@localhost soft]# yum install  mysql-utilities.noarch 2.比较数据库zentao和数据库db_ze ...

  9. nodeEE双写与分布式事务要点一二

    数据库与缓存双写问题 计算机领域任何一个问题都可以通过增加一个抽象"层"来解决. 业务中为了减少热点数据不必要的db查询,往往会增加一层缓存来解决I/O性能.可是I/O多了一层也就 ...

  10. C#线程同步（4）- 通知＆EventWaitHandle一家

    文章原始出处 http://xxinside.blogbus.com/logs/47523285.html 预备知识:C#线程同步(1)- 临界区&Lock,C#线程同步(2)- 临界区&am ...