1,先定义一个中间通信文件js globalBus.js

import Vue from 'vue';
export const globalBus = new Vue();

2,A.vue组件的方法需要去调用B.vue组件的方法。

首先在b组件去声明方法,,loginTo为方法名 number为接受的参数

import { globalBus } from "../../components/globalBus.js";
mounted() {
globalBus.$on("loginTo", (number) => {
    console.log('调用了这个'+number)
});
},

3,然后再A组件用方法调用 ,loginTo是调用的方法,后面11是传的值

import { globalBus } from "../../components/globalBus.js";
methods: {
gototoUserLogin(){
globalBus.$emit("loginTo",111);
},
}

vue 组件之间的自定义方法互相调用的更多相关文章

  1. vue组件之间的传值——中央事件总线与跨组件之间的通信($attrs、$listeners)

    vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...

  2. 前端面试 vue 部分 (5)——VUE组件之间通信的方式有哪些

    VUE组件之间通信的方式有哪些(SSS) 常见使用场景可以分为三类: 父子通信: null 父向子传递数据是通过 props ,子向父是通过 $emit / $on $emit / $bus Vuex ...

  3. vue组件之间的传参

    vue组件之间传参有三种传参方式'父传子','子传父','非父子组件之间传值' 父传子 父组件 <template> <CounterCom :num="5"&g ...

  4. vue组件之间传值方式解析

    vue组件之间传值方式解析一.父组件传到子组件 1.父组件parent代码如下: <template> <div class="parent"> <h ...

  5. vuex-- Vue.的中心化状态管理方案(vue 组件之间的通信简化机制)

    vuex-- Vue.的中心化状态管理方案(vue 组件之间的通信简化机制) 如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 .vuex就是为了解决组件通信问题的. ...

  6. vue 组件内 directives指令的调用方式 <base-table v-auto-height:tableHeight="{vm:this, diffHeight:ahTable.diffHeight}"

    vue 组件内 directives指令的调用方式 <base-table v-auto-height:tableHeight="{vm:this, diffHeight:ahTabl ...

  7. vue 组件之间互相传值:兄弟组件通信

    vue 组件之间互相传值:兄弟组件通信我们在项目中经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入 vuex 轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入 vuex ...

  8. Vue 组件之间通信 All in One

    Vue 组件之间通信 All in One 组件间通信 1. 父子组件之间通信 https://stackblitz.com/edit/vue-parent-child-commutation?fil ...

  9. vue 父子组件传值以及方法调用,平行组件之间传值以及方法调用大全

    vue项目经常需要组件间的传值以及方法调用,具体场景就不说了,都知道.基本上所有的传值都可以用vuex状态管理来实现,只要在组件内监听vuex就好. vue常用的传值方式以及方法有: 1. 父值传子( ...

  10. Vue 组件之间传值

    一.父组件向子组件传递数据 在 Vue 中,可以使用 props 向子组件传递数据. 子组件部分: 这是 header.vue 的 HTML 部分,logo 是在 data 中定义的变量. 如果需要从 ...

随机推荐

  1. cesium加载gif图片(cesium篇.43)

    https://blog.csdn.net/QQ98281642/article/details/120214325

  2. 【解惑】介绍.net中的DataTable的AcceptChanges方法

    DataTable.AcceptChanges方法是一个用于DataTable对象的方法,它将所有对DataTable进行的更改标记为已接受.这意味着所有新增.修改和删除的行都将被标记为DataRow ...

  3. 如何用IoT边缘连接器实现云端应用控制PLC?

    本文分享自华为云社区<数字工厂深入浅出系列(十):IoT边缘连接器实现云端应用控制PLC>,作者: 云起MAE. 通过IoT云平台和边缘计算的技术设施,工厂可以将PLC等OT过程制造控制器 ...

  4. [ansible]建立ssh互信

    创建密钥 # 创建基于rsa算法的密钥,也可以创建ed25519算法的密钥,性能比rsa高 # 一般直接回车即可 ssh-keygen -t rsa 少量建立互信 如果主机数不多的话,可以手动建立互信 ...

  5. Mybatis框架的搭建和基本使用

    本文总结最原始Mybatis框架的搭建和最基本使用(不涉及Spring框架体系). 1 依赖 首先,我们要引入Mybatis依赖: <dependency> <groupId> ...

  6. 移动优先与响应式Web设计

    1.加速度计-设备置向 2.下拉更新-Iscroll 3.滑动以得到更多选项-panel 4.Sketch a Search 雅虎 画圈搜索 5.<Tapeworthy> 移动用户的行为特 ...

  7. ChatGPT赋能低代码开发:打造智能应用的双重引擎

    摘要:本文摘自葡萄城低代码产品活字格的资深用户(格友超哥)所撰写的文章:<惊叹表现!活字格+ChatGPT:低代码开发智能应用的巨大潜力>. ChatGPT的functions函数使用方 ...

  8. Python Web:Django、Flask和FastAPI框架对比

    Django.Flask和FastAPI是Python Web框架中的三个主要代表.这些框架都有着各自的优点和缺点,适合不同类型和规模的应用程序. Django: Django是一个全功能的Web框架 ...

  9. JS遍历Json串并获取Key和Value

    //data为json串 for (var key in data) { console.log(key); console.log(data[key]); }

  10. ES6-ES11最通俗易懂保姆级的笔记!人见人爱,花见花开。赶快动起你发财的小手收藏起来吧,满满的干货,你值得拥有!!

    1.  ES6 1.1  let变量声明以及声明特性 声明变量 let a; let b, c, e; let f = 100, g = "红石榴21", h = []; 特性: ...