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. Git 头像修改 原

    Git头像分两种: 第一种是直接在你当前托管的git服务网站中自定义上传头像 第二种通过第三方网站修改,基本上所有git服务网站都遵循这点,下面说的就是该模式 其实很简单!!! https://zh- ...

  2. There is no getter for property named 'XXX' in 'class java.lang.String'解决方法

    <select id="ProjectHomePage" parameterType="string" resultType="java.uti ...

  3. ECMAScript 6 字符串的扩展

    1.字符的Unicode表示法 ① JavaScript允许采用\uxxxx的形式来表示一个字符,其中xxxx表示字符的Unicode码点. 但是,这种表示方法有一个局限性,它的码点只能在\u0000 ...

  4. oracle 删除重复记录

    查询及删除重复记录的SQL语句   1.查找表中多余的重复记录,重复记录是根据单个字段(Id)来判断   select * from 表 where Id in (select Id from 表 g ...

  5. dnsmasq配置

    介绍 dnsmasq是一个dns和dhcp服务 参数说明 dhcp-sequential-ip 默认情况下Dnsmasq分配ip是根据目标机的mac地址按一定的hash规则来的.这样每个目标机在租约期 ...

  6. [jzoj]2938.【NOIP2012模拟8.9】分割田地

    Link https://jzoj.net/senior/#main/show/2938 Description 地主某君有一块由2×n个栅格组成的土地,有k个儿子,现在地主快要终老了,要把这些土地分 ...

  7. vue引入外部.css文件，webpack将其与.vue中的样式混合打包了，怎么办？

    我使用vue-cli搭自己的博客,希望引入公共样式: // main.js import './assets/styles/common.css' 我本来是希望webpack打包后,能将这个样式独立打 ...

  8. bulid tools

    输入:工程文件+编译说明文件: 处理:自动化构建工具+编译器: 输出:可执行文件. 相对于手动编译. 概述历史上 , 并通过构建自动化Makefile.今天 , 有两种一般类型的工具 : 自动工具 ( ...

  9. Windows 2012 下Redmine安装和环境搭建

    公司在过去一年中处于高速发展创业期,对于技术管理和项目管理没有找到一个很好的管理工具,使用过Teanbition+禅道+SVM的集成管理工具,但是明显各工具之间联系性差,断层严重,不能很好的形成团队成 ...

  10. Java是如何加载资源文件的？（源码解毒）

    上文提到应老板要求开发一个测试工具能方便的加载存于文件中的测试参数,当时考虑既然是测试,把测试参数文件和测试类放在一起岂不是很方便,但是老板说:我的需求是你把测试参数文件放到统一文件夹下比如resou ...