单向数据流通信

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

父组件通过自定义属性传递数据给子组件，子组件使用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. python使用telnetlib

    python使用telnetlib 1 前言 目前,本篇仅记录前段时间搜索得到的关于python使用Telnet的技术博客,由于受领新任务,未进一步验证和深入研究与应用. 参考链接: python官网 ...

  2. 软件测试第二次作业：初识JUNIT单元测试方法

    软件测试有很多分类,从测试的方法上可分为:黑盒测试.白盒测试.静态测试.动态测试   从软件开发的过程分为:单元测试.集成测试.确认测试.验收.回归等. 在众多的分类中,与开发人员关系最紧密的莫过于单 ...

  3. python发送邮件心得体会

    利用本地smtp server发送 windows下尝试装了两个smtp server大概配置了下,发现没法生效,也没时间仔细研究了.装上foxmail发现以前可以本地发送的选项已经无法找到. 不带附 ...

  4. Javascript循环删除数组中元素的几种方法示例

    发现问题 大家在码代码的过程中,经常会遇到在循环中移除指定元素的需求.按照常规的思路,直接一个for循环,然后在循环里面来个if判断,在判断中删除掉指定元素即可.但是实际情况往往不会像预想的那样顺利运 ...

  5. jieba(杰巴)分词的三种模式

    jieba(结巴)是一个强大的分词库,完美支持中文分词,做为最好的Python中文分词组件. 安装:pip install jieba 特点 支持三种分词模式: 1.精确模式,试图将句子最精确地切开, ...

  6. js超链接锚点定位

    <html> <head> <meta charset="UTF-8"> </head> <body> <a on ...

  7. Laravel 安全：避免 SQL 注入

    当你使用 Eloquent 查询时,如: User::where('name', $input_name)->first(); Eloquent 内部使用的是 PDO 参数绑定,所以你的请求是安 ...

  8. java操作Jacoco合并dump文件

    记录瞬间 import org.apache.maven.plugin.MojoExecutionException; import org.jacoco.core.tools.ExecFileLoa ...

  9. elasticsearch数据备份与sshfs建立共享文件

    1.背景: 最近公司为了适应业务的发展,利用elasticsearch搜索引擎搭建了两个节点.为了防止数据丢失的特殊情况,需要定时做数据备份,而由于elasticsearch为两个节点分别在不同的服务 ...

  10. Vue学习2：模板语法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...