直接看图说话

vue Bus总线

import Vue from 'vue';
import VueBus from 'vue-bus';
Vue.use(VueBus);

这是子组件要发到父组件的写法

组件一

 this.$bus.emit('add-todo','这里是发送的数据');

组件二

created(){
  this.$on('add-todo',(data)=>{
    console.log(data,'接收到的数据')
  })
}

vue 父子之间通信及非父子之间通信的更多相关文章

  1. Vue组件通信之非父子组件传值

    前言: 如果想要了解非父子关系的组件传值,最好是在了解父传子和子传父的基础上在来了解非父子传值可能会有更透彻的思路. 因为非父子传值是通过定义事件总线来代理实现父传子+子传父从而实现的传值方式. 这是 ...

  2. vue中父子间传值和非父子间传值

    vue传值一般分三种方式:父组件向子组件传值.子组件向父子间传值.非父子组件进行传值 一.父组件向子组件传值:父组件引用子组件后,通过数据绑定(v-bind)向子组件传值 父组件: <templ ...

  3. Vue 组件&组件之间的通信 之 非父子关系组件之间的通信

    Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信: 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信的目的: 实例: 初始加 ...

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

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

  5. Vue 组件 非父子组件通信

    有时候两个组件也需要通信(非父子关系),在简单的场景下,可以使用一个空的vue实例作为中央事件总线: var bus = new Vue(); //触发组件a中的事件 bus.$emit('id-se ...

  6. Vue组件传值,父传子,子传父,非父子组件

    vue3中传值方式: 1.父组件向子组件传值 父组件Blog.vue <template> <div id="blog"> <Alert v-if=& ...

  7. vue非父子关系之间通信传值

    第一种方法: 通过给vue实例添加自定义属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  8. vue中父子组件之间的传值、非父子组件之间的传值

    在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...

  9. 简述在Vue脚手架中,组件以及父子组件(非父子组件)之间的传值

    1.组件的定义 组成: template:包裹HTML模板片段(反映了数据与最终呈现给用户视图之间的映射关系) 只支持单个template标签: 支持lang配置多种模板语法: script:配置Vu ...

随机推荐

  1. Lodop某个电脑打印内容大小有问题

    可能原因分析:本地设置放大比例问题,是真实的放大或缩小,1.查看比例应在100%, 2.控制面板设置显示应在100%(win7 win10中) 3.超文本样式问题,分析样式中不同浏览器版本下显示不一致 ...

  2. C# 数组、HashSet等内存耗尽的解决办法

    在C#中,如果数据量太大,就会出现 'System.OutOfMemoryException' 异常. 解决办法来自于Stack Overflow和MSDN    https://docs.micro ...

  3. 关于base64转码解码

    刚好涉及到记录一下 1.JS BASE64 解码和编码 js代码: /** * * Base64 encode / decode * * @author haitao.tu * @date 2010- ...

  4. 【XSY2843】「地底蔷薇」 NTT什么的 扩展拉格朗日反演

    题目大意 给定集合\(S\),请你求出\(n\)个点的"所有极大点双连通分量的大小都在\(S\)内"的不同简单无向连通图的个数对\(998244353\)取模的结果. \(n\le ...

  5. bzoj 4571: [Scoi2016]美味 (主席树)

    链接:https://www.lydsy.com/JudgeOnline/problem.php?id=4571 题面; 4571: [Scoi2016]美味 Time Limit: 30 Sec   ...

  6. 「洛谷3469」「POI2008」BLO-Blockade【Tarjan求割点】

    题目链接 [洛谷传送门] 题解 很显然,当这个点不是割点的时候,答案是\(2*(n-1)\) 如果这个点是割点,那么答案就是两两被分开的联通分量之间求组合数. 代码 #include <bits ...

  7. Codeforces 1077D Cutting Out(二分答案)

    题目链接:Cutting Out 题意:给定一个n长度的数字序列s,要求得到一个k长度的数字序列t,每次从s序列中删掉完整的序列t,求出能删次数最多的那个数字序列t. 题解:数字序列s先转换成不重复的 ...

  8. CF993D Compute Power(二分+Dp)

    一看到这种求\(min/max\left \{ \frac{\sum a_i}{\sum b_i} \right \}\)的题肯定是\(01\)分数规划,大概可以算作一种二分? 设\(ans\)为当前 ...

  9. I2C 总线原理与架构

    一.I2C总线原理 I2C是一种常用的串行总线,由串行数据线SDA 和串行时钟线SCL组成.I2C是一种多主机控制总线,它和USB总线不同,USB是基于master-slave机制,任何设备的通信必须 ...

  10. 【gdoi2018 day2】第二题 滑稽子图(subgraph)(性质DP+多项式)

    题目大意 [gdoi2018 day2]第二题 滑稽子图(subgraph) 给你一颗树\(T\),以及一个常数\(K\),对于\(T\)的点集\(V\)的子集\(S\). 定义\(f(S)\)为点集 ...