单向数据流通信

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

父组件通过自定义属性传递数据给子组件，子组件使用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. Google word/sheets 常见的使用:

    Google Sheets: 1, sheets 里面的单元格设置自动换行: 选中单元格: --> Format --> Text Wrapping --> Wrap(自动换行)/C ...

  2. django请求接收及文件上传

    在写后端交互页面的时候常常会遇到接收来自前端页面请求的情况,例如 在写注册页面的时候,会提交一些页面信息,这时需要分三种情况讨论 第一种,接收单项信息: v = request.POST.getlis ...

  3. 安装Oracle Grid的过程中用到的几个小技巧

    1.利用文件来模拟块设备 在grid的安装教程中有一步是 provision the disk devices for use with ASM Filter Driver.但是如果我们没有多个磁盘怎 ...

  4. 201902<<百岁人生>>

    过年的那段时间,在家看到公司推荐的10本2019年必读书籍,里面有这本书,于是就开始了.... 第一次这么认真的看这类书籍,看完之后感触颇多,毕竟这个问题我从没思考过,很少站在这样的高度去看所有方方面 ...

  5. Tarjan求LCA

    LCA问题算是一类比较经典的树上的问题 做法比较多样 比如说暴力啊,倍增啊等等 今天在这里给大家讲一下tarjan算法! tarjan求LCA是一种稳定高速的算法 时间复杂度能做到预处理O(n + m ...

  6. Logistic回归计算过程的推导

    https://blog.csdn.net/ligang_csdn/article/details/53838743 https://blog.csdn.net/weixin_30014549/art ...

  7. 【JavaScript】JS知识点复习

    1.引入的两种方式:直接在标签里行内js,在body最下端引入. 2.变量的5种类型:number,string,boolean,null,undefined以及一种特殊类型:object 3.变量命 ...

  8. 【编程基础】C语言常见宏定义

    我们在使用C语言编写程序的时候,常常会使用到宏定义以及宏编译指令,有的可能比较常用,有的可能并不是很常用,是不是所有的C语言宏定义以及宏指令你都清楚呢? 指令 用途详细介绍 # 空指令,无任何效果 # ...

  9. 多个for循环嵌套会影响速度

    在复现Meta-SR的过程中,发现如果嵌套多个for 循环会使速度过慢.这是下面实验得出的结论: import time t1 = time.time() a = range(3000) b = ra ...

  10. 【转载】常用精品API接口汇总

    原文链接戳这里~~ 下面列举了100多个国内常用API接口,并按照 笔记.出行.词典.电商.地图.电影.即时通讯.开发者网站.快递查询.旅游.社交.视频.天气.团队协作.图片与图像处理.外卖.消息推送 ...