单向数据流通信

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

父组件通过自定义属性传递数据给子组件，子组件使用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. .NET 内存分配笔记

    阅读博客http://jonskeet.uk/csharp/memory.html的笔记(个人水平有限,如若翻译.记录有误,请提,谢谢~) 误区:引用类型保持在堆中,值类型保持在栈中. 问题:前半句正 ...

  2. textbox 未

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Tex ...

  3. 《ASP.NET Core In Action》读书笔记系列，这是一个手把手的从零开始的教学系列目录

    最近打算系统学习一下asp.net  core ,苦于没有好的中文书藉,只好找来一本英文的 <ASP.NET Core In Action>学习.我和多数人一样,学习英文会明显慢于中文.希 ...

  4. (Review cs231n) Spatial Localization and Detection（classification and localization）

     重在图像的定位和检测的内容. 一张图片中只有一种给定类别标签的对象,定位则是图像中有对象框:再这些类中,每一个训练目标都有一个类和许多的图像内部对应类的位置选框. 猜想的仅是类标签,不如说它们是位置 ...

  5. 软件综合实践Axure介绍

    首先就是下载安装Axure这款软件了,在百度上搜索“”Axure rp下载“”即可,下载完成后,打开exe安装,根据步骤一步步点击下一步即可完成安装. 运行该软件时会出现类似于填写激活码的东西,这时依 ...

  6. day09-python基础

    一.Linux基础 - 计算机以及日后我们开发的程序防止的服务器的简单操作 二.Python开发 a.开发 1.开发语言 高级语言:Python Java.PHP C# Go ruby C++... ...

  7. 2.1JAVA基础复习——JAVA语言的基础组成注释和常量变量

    JAVA语言的基础组成有: 1.关键字:被赋予特殊含义的单词. 2.标识符:用来标识的符号. 3.注释:用来注释说明程序的文字. 4.常量和变量:内存存储区域的表示. 5.运算符:程序中用来运算的符号 ...

  8. token鉴权的一种实现方式图解

  9. python操作字符串类型json的注意点

    python操作json的方法有json.dumps——将json对象(字典)转换为字符串对象json.loads——将字符串对象转换为json对象(字典)如果定义json对象jsonstring1= ...

  10. golang获取文件的md5

    直接展示代码 func md5sum(filepath string) (string, error) { f, err := os.Open(filepath) if err != nil { st ...