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. oracle用户密码刷新

    1.查询用户信息 col username for a25 col account_status for a18 col profile for a20 select username,account ...

  2. LeetCode 周赛上分之旅 # 36 KMP 字符串匹配殊途同归

    ️ 本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 和 BaguTree Pro 知识星球提问. 学习数据结构与算法的关键在于掌握问题背后的算法思维框架,你的思考越 ...

  3. [golang]使用gocron编写定时任务

    前言 linux自带的crontab默认情况下只能精确到分钟,没法执行秒级任务.当然,也不是不行,比如: * * * * * for i in $(seq 1 11);do echo hello &g ...

  4. 银河麒麟等 Linux系统 安装 .net 5,net 6及更高版本的方法

    最近项目上用到 银河麒麟的操作系统,需要搭建 .net 跨平台方案.一开始使用各种命令都安装不上,很多提示命令找不到,或者下载包时候网络无法下载. 网上教程很多,但没有一个是成功的,多数使用 apt ...

  5. [Arch小贴士]在这里记录一些自己使用的小技巧

    哈喽!Arch 目录 0x00 设置开机自启动软件 首先 最后 0x01 ASLR开关 0x00 设置开机自启动软件 首先 首先进入目录/usr/share/applications,找到你要的那个软 ...

  6. 百亿补贴通用H5导航栏方案

    背景 在移动端页面中,由于屏幕空间有限,导航条扮演着非常重要的角色,提供了快速导航到不同页面或功能的方式.用户也通常会在导航条中寻找他们感兴趣的内容,因此导航条的曝光率较高.在这样的背景下,提供一个动 ...

  7. ELK环境部署-基础环境安装(一)

    ELK简介 ElasticSearch工作原理以及专用名词 ELK是Elasticsearch(ES) , Logstash, Kibana的结合,是一个开源日志收集软件. Elasticsearch ...

  8. Hugging News #0904:🤗 登陆 AWS Marketplace

    每一周,我们的同事都会向社区的成员们发布一些关于 Hugging Face 相关的更新,包括我们的产品和平台更新.社区活动.学习资源和内容更新.开源库和模型更新等,我们将其称之为「Hugging Ne ...

  9. 如何使用Vite创建Vue3的uniapp项目

    项目结构 my-vue3-project ├─ .env //默认环境变量 ├─ .env.development //开发环境变量 ├─ .eslintrc-auto-import.json //( ...

  10. .NET周刊【9月第2期 2023-09-10】

    国内文章 使用 OpenTelemetry 构建 .NET 应用可观测性(2):OpenTelemetry 项目简介 https://www.cnblogs.com/eventhorizon/p/17 ...