1.父组件传递数据给子组件

父组件数据如何传递给子组件呢？可以通过props属性来实现

父组件：

子组件通过props来接收数据: 
方式1：

方式2 :

方式3：

这样呢，就实现了父组件向子组件传递数据.

2.子组件与父组件通信

那么，如果子组件想要改变数据呢？这在vue中是不允许的，因为vue只允许单向数据传递，这时候我们可以通过触发事件来通知父组件改变数据，从而达到改变子组件数据的目的.

父组件:

3.非父子组件通信

如果2个组件不是父子组件那么如何通信呢？这时可以通过eventHub来实现通信. 
所谓eventHub就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件.

组件1触发：

组件2接收:

Vue父子组件及非父子组件如何通信的更多相关文章

  1. vue传值（父子传值，非父子传值）

    vue组件传值,分为父子传值和非父子传值,父子传值又分为父传子和子传父. 组件之间的传值,实现了数据的联动,是从操作Dom到操作数据一个跳转性的突破,在学习vue双向绑定原理之后, 这种观念就应该继续 ...

  2. react第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能)

    第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能) #课程目标 理解因为react的单向数据流 理解表单组件会因为react数据流变的不好维护 理解受控组件与非受控组件的实质区别 理解 ...

  3. React受控组件和非受控组件

    受控组件和非受控组件主要是用来解决表单组件状态谁来控制的问题.因为用户的输入会反应在界面上,相当于视图的状态发生了变化,而react是通过虚拟DOM比对修改视图的,这里就要决定谁来控制表单组件的状态. ...

  4. React：受控组件与非受控组件混用实战 - 译文

    原文链接:React: hybrid controlled components in action 受控组件 非受控组件 混用受控组件和非受控组件 原则一 原则二 原则三 原则四 实施方案 总结 F ...

  5. 浅谈react受控组件与非受控组件

    引言 最近在使用蚂蚁金服出品的一条基于react的ant-design UI组件时遇到一个问题,编辑页面时input输入框会展示保存前的数据,但是是用defaultValue就是不起作用,输入框始终为 ...

  6. react 表单（受控组件和非受控组件）

    我们知道表单元素与其他的普通DOM元素来说是不一样的,它们保存了自己的一些状态. 我们主要说的就是表单元素中的受控组件和非受控组件. 受控组件就是这个组件的状态是我们(react)控制的,这个组件的行 ...

  7. react中 受控组件和 非受控组件 浅析

    一 受控组件 顾名思义,受控 也就是能够被控制,简而言之也就是 该组件ui的显示或者内部state逻辑的变化依赖外部的 props的传入. 二 非受控组件 顾名思义,非受控,也就是内部的视图变化,st ...

  8. vue父子组件及非父子组件通信

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...

  9. vue bus方式解决非父子组件间的传值

    对于非父子组件之间的传值 通常使用VUEX 和总线等方式解决 这里我聊聊发布订阅模式(总线) <body> <div class="app"> <ch ...

随机推荐

  1. Django REST framework serializer 嵌套显示绝对路径

    在 Django REST framework官方文档提到,当调用Serializer时,应当传入request参数,以便生成完整的url而不是相对url.使用ModelSerializer时requ ...

  2. Android+openCV人脸检测2(静态图片)

    前几篇文章中有提到对openCV环境配置,这里再重新梳理导入和使用openCV进行简单的人脸检测(包括使用级联分类器) 一 首先导入openCVLibrary320 二 设置gradle的sdk版本号 ...

  3. 基于Python & Opencv 图像-视频-处理算法

    Alg1:图像数据格式之间相互转换.png to .jpg(其他的请举一反三) import cv2 import glob def png2jpg(): images = glob.glob('*. ...

  4. DPI与DFI技术分析

    DPI全称为“Deep Packet Inspection”,称为“深度包检测”.DPI技术在分析包头的基础上,增加了对应用层的分析,是一种基于应用层的流量检测和控制技术,当IP数据包.TCP或UDP ...

  5. NEO-Karl-Python1

    第一个程序: print("NEO-Karl welcome to the new world")

  6. python-ironicclient使用

    使用cli from ironicclient import client kwargs = {'os_username': 'ironic', 'os_password': 'IRONIC_PASS ...

  7. Hibernate 单向一对多映射

    单向 n-1: 单向 n-1 关联只需从 n 的一段访问 1 的一端 此处 Order 类和 Customer 类,其中 Order 类需要引用 Customer 类 代码: public class ...

  8. oracle统计数据时，涉及两个表的数据

    SELECT t1.*,a.num FROM (SELECT SUM(t.total_profit) total_profit, SUM(t.main_business_income) main_bu ...

  9. JDK8之The type java.util.Map$Entry cannot be resolved

    eclipse+tomcat7+jdk1.6上面报错的方式我的解法方法是吧jre8换成6的就好了选中项目->右键->java build path ->找到jre system li ...

  10. Viterbi algorithm

    HMM(隐马尔可夫模型)是用来描述隐含未知参数的统计模型,是一个关于时序的概率模型,它描述了一个由隐藏的马尔可夫链生成状态序列,再由状态序列生成观测序列的过程.其中,状态之间的转换以及观测序列和状态序 ...