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. phonegap走起

    最近phonegap已发布4.0的了..速度提升了不少,很给力.小白们可以看下如何构建phonegap开发平台. 此文将说明如何建立一个可以被vs2015打开的phonegap的项目.我还会加上ion ...

  2. 圆周率pi π 与 角度的对应关系

    圆周率pi π 与 角度的对应关系 π 180° π/2 90° π/4     45° π/6     30°

  3. Problem J. Journey with Pigs

    Problem J. Journey with Pigshttp://codeforces.com/gym/241680/problem/J考察排序不等式算出来单位重量在每个村庄的收益,然后生序排列猪 ...

  4. 下面为初学者分享一下SQL 数据库学习资料

    一.基础 1.说明:创建数据库CREATE DATABASE database-name2.说明:删除数据库drop database dbname3.说明:备份sql server--- 创建 备份 ...

  5. linux操作笔记记录

    export https_proxy=https://10.10.2.91:8888export http_proxy=http://10.10.2.91:8888 桥接模式:需要配一个静态ip,可以 ...

  6. 2017 United Kingdom and Ireland Programming Contest (UKIEPC 2017)

    A. Alien Sunset 暴力枚举答案即可. #include<cstdio> int n,i,mx; struct P{ int h,r,t; bool night(int x){ ...

  7. vue中，对象数组多层嵌套时，更新数据更新页面

    vue中的对象和数组的元素直接赋值修改时,是不能响应到view中去的 1.对象更新 this.a={title:'列表1’}; this.a.title='列表2’; <h1>{{a.ti ...

  8. Linux下的文件切割和文件合并

    linux下文件分割可以通过split命令来实现,可以指定按行数分割和按大小分割两种模式.Linux下文件合并可以通过cat命令来实现. 在Linux下用split进行文件分割: ①:指定分割后文件行 ...

  9. Django中的Form表单验证

    回忆一下Form表单验证的逻辑: 前端有若干个input输入框,将用户输入内容,以字典传递给后端. 后端预先存在一个Form表单验证的基类,封装了一个检测用户输入是否全部通过的方法.该方法会先定义好错 ...

  10. HTML5_图片合成_刮刮卡

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