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. Servlet（四）：request和response对象

    Request对象:问题: 浏览器发起请求到服务器,会遵循HTTP协议将请求数据发送给服务器. 那么服务器接受到请求的数据改怎么存储呢?不但要存,而且要保证完成性. 解决: 使用对象进行存储,服务器每 ...

  2. GG的文化课

    attack大神退役后,我连文化课都被吊打了 attack:我要回来虐你们了 attack:怎么感觉能裸分清北呢 attack:我稳了 attack:你们个菜鸡,连bed和bad怎么读都不知道

  3. 用c# 开发html5的尝试，试用bridge.net

    Javascript交叉编译方案很多了,工业级品质的也不是没有,但前两年我从事html5 3d引擎开发时,做过一圈评估,没有可用的. 作为一个c#爱好者,我自然是很希望能最大限度的利用c#的生产力,之 ...

  4. jmeter基本组成原件介绍

    jmeter基本组成原件介绍 参考地址:https://wenku.baidu.com/view/d4986ca2aaea998fcc220ec1.html 从性能工具的原理划分: Jmeter工具和 ...

  5. Java 中的字符串转为二进制

    /** * 将字符串转为二进制 */ public class StrConversion { public static void main(String args[]) { String str ...

  6. HTML5_图片合成_刮刮卡

    刮刮卡(图片合成) 定义: globalCompositeOperation 属性,设置或返回如何将源图像 将 myCanvas 的背景图设置为一张图片,(刮开后显示) // 目标图像(已有的,外面一 ...

  7. (87)Wangdao.com第二十天_JavaScript document 节点对象

    document 节点对象, 代表整个文档,每张网页都有自己的 document 对象. window.document 当浏览器开始加载文档时就存在了 正常的网页使用 document 或者 win ...

  8. postman上传图片时已经添加cookie，但仍显示未登陆

    postman上传图片时,已经添加过cookie,但是返回的结果是用户未登陆,如下图所示: 我的解决办法是:清楚cookie code中的cookie 最终的结果如下:成功

  9. Hibernate 的hql查询简介【申明：来源于网络】

    Hibernate 的hql查询简介[申明:来源于网络] Hibernate 的hql查询简介:http://blog.csdn.net/leaf_130/article/details/539329 ...

  10. js表单反显

    /* * 表单自动回显js * 依赖JQURY * 使用参考:$("#form1").form("load",{"id":"112 ...