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. Grid move

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  2. Json常用序列化工具包大比拼

    一.前言 Json已成为计算机编程中最常用的数据传输和存储格式之一,所以对Json的序列化和反序列化工具的选择也是互联网系统中比较重要的环节,尤其在高并发下的执行效率,可能会直接影响系统的吞吐率.本文 ...

  3. spring boot + vue + element-ui全栈开发入门——前端编辑数据对话框

     需求 1.点击“添加”按钮,弹出录入数据的对话框窗口,并录入数据,如果数据有误则不允许提交.数据填写完毕后,点击“保存”按钮,调用http协议提交数据,提交完毕刷新页面数据.点击“取消”按钮关闭对话 ...

  4. C# 求链表 list 中 属性的 最大值 最小值

    获取链表List中对象属性最大值最小值(Max,Min)的方法: 1.创建一个类,类中有一个属性A /// <summary> /// 用于测试属性的类 /// </summary& ...

  5. laravel blog edit

    模板复制create的模板 主要修改的地方 <form action="{{ url('admin/article/'.$article->id) }}" method ...

  6. 无法加载协定为“NM3.IClrService”的终结点配置部分，因为找到了该协定的多个终结点配置。请按名称指示首选的终结点配置部分

    <binding name="NetTcpBinding_IClrService1" receiveTimeout="00:10:00" sendTime ...

  7. qemu创建vm和vcpu进入kvm的流程

    kvm是一个内核模块,它实现了一个/dev/kvm的字符设备来与用户进行交互,通过调用一系列ioctl函数可以实现qemu和kvm之间的切换. 1.qemu发起KVM_CREATE_VM的ioctl创 ...

  8. c#的几种数据结构

    Array/ArrayList/List/LinkedList/Queue/Stack/HastSet/SortedSet/Hashtable/SortedList/Dictionary/Sorted ...

  9. MTK-LCM 屏幕使用fbconfig/PanelMaster来调试LCM驱动

    屏幕调试是我们做的较多的工作,且以MIPI屏为主,调试时总是会遇到一些参数需要一点一点配的时候,这样的工作其实很是繁琐,在我们确认完硬件没有问题时能不能使用简易的方法来解决这个问题呢 ? MTK已经为 ...

  10. 小米5查看设备号信息及验证type-c数据线

    首先,下载adb软件. 接着打开系统的开发者模式和调试模式. 打开cmd软件,切换到adb软件文件夹所在路径,输入命令:adb devices,则能看到设备的设备号信息. 如果设备号是00000001 ...