单向数据流通信

单向数据流通信是指父组件传递数据给子组件，子组件是不可以修改该数据的（可以改，但会警告）

父组件通过自定义属性传递数据给子组件，子组件使用props接收

如果想修改数据，子组件需要使用$emit发布一个自定义事件，父组件用v-on进行监听来修改数据

双向数据绑定

子组件修改父组件传递的数据

1.使用sync

在父组件里自定义一个属性使用sync

在子组件里接收数据修改数据的时候使用update达到双向数据绑定，这时候子组件点击按钮父组件的数据show会改变

2.使用v-model指令

在父组件里使用v-model指令控制数据

在子组件里接收的参数名要写成value,然后发布input事件修改数据

事件总线

寻找俩个组件共有的对象，并且这个对象有发布和监听事件俩方法，可以自己创建这样的对象或者事件new Vue跟实例

利用这俩个事件可以进行跨组件传递事件，他有很大的缺点，组件都可以改变数据，这样会导致数据混乱

在一个组件里引入俩组件，成为兄弟组件

在child组件里有个按钮，发布一个Handler事件传递一个数据

然后在brother组件里监听Handler事件接收数据

Vue组件通信的更多相关文章

  1. vue组件通信的几种方式

    最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...

  2. vue 组件通信

    组件 组件之间的数据是单向绑定的. 父组件向子组件通信 是通过子组件定义的props属性来实现.通过props定义变量与变量类型和验证方式. props简化定义 在简化定义中,变量是以数组的方式定义. ...

  3. VUE 组件通信总结

    1.prop 父组件传递给子组件,即通过VUE本身具有的Props属性来传递值 Child组件 <template> <span>{{message}}</span> ...

  4. vue组件通信那些事儿

    一.说说通信 通信,简言之,交流信息.交流结束后,把信息放在哪里,这是一个值得思考的问题.vue中保存状态有2种方式,组件内的data属性和组件外的vuex的state属性. 1.用state的场景 ...

  5. vue组件通信&&v兄弟组件通信eventbus遇到的问题（多次触发、第一次不触发）

    组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的 (vuex以后再说). 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <templ ...

  6. vue 组件通信传值

    父子组件通信: 子组件 <template> <div> <h3 @click="alerrt"> 我是子组件一</h3> < ...

  7. Vue组件通信之Bus

    关于组件通信我相信小伙伴们肯定也都很熟悉,就不多说了,对组件通信还不熟悉的小伙伴移步这里. 在vue2.0中 $dispatch 和 $broadcast 已经被弃用.官方文档中给出的解释是: 因为基 ...

  8. Vue组件通信的几种方法

    上一节说到,vue.js是允许子组件通过props接受父组件的信息,但是不允许父组件通过props接受子组件的信息 1. $emit()和on 当子组件需要向父组件传递数据时,就要用到自定义事件. 使 ...

  9. vue组件通信之父子组件通信

    准备工作: 首先,新建一个项目,如果这里有不会的同学,可以参考我转载过的文章 http://www.cnblogs.com/Sky-Ice/p/8875958.html  vue 脚手架安装及新建项目 ...

  10. vue组件通信之非父子组件通信

    什么顺序不顺序的.. 先来说说非父子组件通信. 首先,我们先来了解下vue中的 1.$emit  触发当前实例上的事件,附加参数都会传给监听器回调. 2.$on  监听当前实例上的自定义事件.事件可以 ...

随机推荐

  1. 使用datagrid时json的格式

    EasyUI的DataGrid要求返回的JSON数据集是这样的形式: {"total":总记录数量,"rows":[数据记录数组]}. 例如: {"t ...

  2. 消息中间件解决方案JMS

    1. JMS入门 1.1消息中间件 1.1.1品优购系统模块调用关系分析 我们现在讲品优购已经完成的功能模块梳理如下: 我们已经完成了5个web模块和4个服务模块.其中运营商后台的调用关系最多,用到了 ...

  3. Beep函数实现硬件蜂鸣声

    #include <Windows.h> #include <tchar.h> int WINAPI _tWinMain(HINSTANCE hInstance, HINSTA ...

  4. 《linux就该这么学》第十三节课：第11章和第12章，vsftpd服务与samba和nfs服务

    第十一章 (借鉴请改动) 11.1.文件传输协议 FTP文件穿数协议,端口20用于数据传输,21端口用于传输相关FTP命令 ftp协议的两种工作模式: 主动模式:ftp向客户端发起 被动模式(默认): ...

  5. c# webapi上传、读取、删除图片

    public class FileAPIController : BaseController    {        private readonly string prefix = "t ...

  6. Asp.net(C#)年月日时分秒毫秒

    年月日时分秒毫秒格式:yyyyMMddHHmmssfff

  7. Mac下安装SecureCRT并激活

    今天花了好长的时间终于把SecureCRT安装成功了 现在分享给大家 安装的步骤, 希望对大家用帮助 Mac下的SecureCRT需要破解才能使用 所以有些费劲的.. 先下载SecureCRT和破解文 ...

  8. REST framework---基于类的视图

    一.程序设计 1.路由设计 from django.conf.urls import url from django.contrib import admin from app import view ...

  9. C++ STL stack 用法

    Stack(栈)是一种后进先出的数据结构,也就是LIFO(last in first out) ,最后加入栈的元素将最先被取出来,在栈的同一端进行数据的插入与取出,这一段叫做“栈顶”. 使用STL的s ...

  10. 5.1JAVA基础复习——JAVA中的静态代码块、构造代码块、构造函数、局部代码块区别

    构造代码块: 在类中定义可以给所有对象进行初始化.局部代码块: 在方法中定义属性的生命周期.静态代码块: 在类中定义用于给类调用时属性的初始化 构造函数与构造代码块的区别: 构造函数是给对应的对象进行 ...