vue 调用非父子组件的方法

最新推荐文章于 2024-10-10 17:17:55 发布

Eal7

最新推荐文章于 2024-10-10 17:17:55 发布

阅读量580

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/slow097/article/details/124876504

版权

有两个组件A和B，A和B不是父子组件，但是我需要在B组件中调用A组件的方法

举个例子，A组件的methods里有一个add方法。

那我再B组件脚本开头引入

//B模块

import A from 'A的相对路径’

然后调用方法

A.methods.方法函数名()

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Eal7

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue3父子组件相互调用方法详解

共同学习，共同成长

05-11

7458

在vue3项目开发中，我们常常会遇到父子组件相互调用的场景，下面主要以setup语法糖格式详细聊聊父子组件那些事儿

Vue2中子组件调用父组件的方法，父组件调用子组件的方法，父子组件互相传值和方法调用

共同学习，共同成长

05-10

5827

Vue2中子组件调用父组件的方法，父组件调用子组件的方法，父子组件互相传值和方法调用

4 条评论您还未登录，请先登录后发表或查看评论

vue2.0父子组件及非父子组件之间的通信方法

08-31

给大家介绍了vue2.0父子组件及非父子组件之间的通信方法，非常不错，具有参考借鉴价值，需要的朋友参考下吧

【vue非父子关系的组件，实现相互调用】

weixin_44665318的博客

03-15

469

建立 util.js 中转站文件（任意位置都可以,我是在 src/js/util.js）vm.$on( event, fn );//监听event事件后运行 fn；vm.$ emit( event, arg ) //触发当前实例上的事件。

vue3借助bus实例进行非父子组件通信

最新发布

weixin_53124862的博客

10-10

251

2.再需要发送事件的页面引入进行使用这里就直接用 a.vue 代替。3. b.vue 来到需要监听的页面。1.首先创建eventBus.js文件。以下代码可直接复制/粘贴使用哦。废话不多说直接进入正题。

vue2 调用非父子组件方法的方式

weixin_30371469的博客

07-05

145

今天用vue2 折腾spa的时候，遇到了这样的一个问题，有两个组件A和B，A和B不是父子组件，但是我需要在B组件中调用A组件的方法，官方文档找不到合适的答案，网上的相关资料也很少（原谅我懒得去FQGoogle）。一番折腾之后，我想到ES6的基本语法，可以通过引入模块去调用方法，于是，我在B组件中以模块的方式引入了A组件，然后直接调用B组件的方法，成功了！举个例子，A组件的methods里有...

Vue(非)父子组件的传值以及方法调用

weixin_34085658的博客

12-24

420

1.vue父组件给子组件传值的方法<heador :userName="username"></heador>子组件中通过props接收传值props:{ username:{ type:String, default:"" }} 2.vue父组件调用子组件的方法<heador ref="head...

vue非父子组件通信问题及解决方法

08-27

主要介绍了vue非父子组件通信问题及解决方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

Vue非父子组件之间传值

01-08

然而，在实际应用中，我们常常需要非父子组件之间进行通信。由于Vue的单向数据流原则，直接修改父组件的值在子组件中是不被推荐的，因此需要采取其他方法来实现实现组件间的数据传递。这里介绍的就是使用“Bus”（或...

详解Vue 非父子组件通信方法（非Vuex）

08-30

本篇文章主要介绍了详解Vue 非父子组件通信方法（非Vuex），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

vue一个组件调用其他组件的方法（非父子组件）

记录

06-01

1145

—B页面（组件）想调用 A页面(组件)中的方法；但是两个页面（组件）毫无关联（刷新 A的数据）然后就是在B 页面定义一个点击事件（举例），重新给 Vuex中的属性赋值就行了。2、被使用组件- A 页面（组件）3、使用触发页面-B 页面（组件）2、触发页面-B组件/发布事件。3、接收页面-A组件/订阅事件。这里我的当前组件要调用。的methods属性中。

初识 Vue（18）---（非父子组件间的传值）

姜皓的博客

07-28

975

非父子组件间的传值常一个应用会以一棵嵌套的组件树的形式来组织：将一个大组件进行拆分下图这种情况的组件间传值（父子组件间传值）方法：父组件通过 Props 向子组件传值，子组件通过事件触发向父组件传值下图这种情况的组件间传值（父子组件间隔代传值，也是非父子组件间传值）方法：将第二层作为中间层，父组件（1）通过 Props 向子组件（2）传值，父组件（2）通过 Prop...

vue 进阶教程之：非父子组件通信方法（非Vuex）

MYuanFang的博客

05-16

2322

转载：https://www.jianshu.com/p/d3036001f6d3 很实用，需要的朋友可以进去看下

Vue 进阶教程之：非父子组件通信方法（非Vuex）

正在崛起的博客

01-11

466

一提到两个非父子组件通信方法，有经验的 coder 肯定会说用 Vuex 啊，我个人建议不要为了用 Vuex 而用 Vuex，除非你的项目很大，耦合度很高，需要大量的储存一些 data，组件之间通信频繁。当然还是要根据自己的业务场景的来决定，总之还是那句话，不要为了用 Vuex 而用 Vuex！ Vue 官网介绍了非父子组件通信方法：不过官网说的太简单了，新手看完估计还是

vue2.0之非父子组件通信

Tank_in_the_street的博客

06-11

1188

在vue的1,0版本里，组件之间的通信是通过$dispatch和$broadcast来进行通信的，但是在2.0版本里面则取消上述这两个方法，并提出了新的解决办法。关于vue2.0的父子组件的通信上文也有讲过，现在要讲的是非父子组件。在vue官网中，官方推荐使用eventBus来进行非父子组件的通信，本文现在演示在项目中如何实现非父子组件通信。首先在父组件(App.vue)里，有两个子组

【VUE】vue父子组件通信以及非父子组件通信的方法

李小白的博客

07-03

3256

Part1：父子组件父组件给子组件传值不需要使用其他库，可以直接使用props传值，talk is cheap，show me the code！Parent.vue<template> <div class="hello"> <h1 @click="changeMsg">click send message to child by props&lt...

vue如何实现父子组件通信，以及非父子组件通信（待看）

melody_day的博客

12-08

4204

https://vuefe.cn/v2/guide/components.html# 非父子关系 var vm = new Vue({ el: '#list', ready: function(){ var _this = this; var url = 'http://192.168.1.111:8080/api/v2/getCommonCourses';

vue-bus非父子组件之间触发事件

Lee的博客

12-26

4550

在main.js 中全局引入 import VueBus from 'vue-bus' Vue.use(VueBus) 组件监听 this.$bus.emit('eventBusName',obj ); 组件事件触发created(){ var self = this; this.$bus.on('eventBusName', funct

12.vue3组件化开发(非父子组件之间的通信和插槽)

phoebemeng的博客

09-05

410

非父子组件之间的通信;默认插槽,具名插槽,作用域插槽

vue非父子组件方法调用

04-29

在 Vue 中，非父子组件之间的通信可以通过事件总线（EventBus）来实现。事件总线是一个空的 Vue 实例，可以用它来触发和监听事件。首先，在一个单独的文件中创建一个事件总线： ```javascript import Vue from 'vue'; export const EventBus = new Vue(); ``` 然后，在需要触发事件的组件中，可以使用 `EventBus.$emit` 方法来触发事件： ```javascript import { EventBus } from './event-bus'; export default { methods: { handleClick() { EventBus.$emit('my-event', 'Hello from Component A!'); } } } ``` 最后，在需要监听事件的组件中，使用 `EventBus.$on` 方法来监听事件： ```javascript import { EventBus } from './event-bus'; export default { created() { EventBus.$on('my-event', message => { console.log(message); // 'Hello from Component A!' }); }, destroyed() { EventBus.$off('my-event'); } } ``` 需要注意的是，在组件销毁时，需要使用 `EventBus.$off` 方法来取消事件监听，以防止内存泄漏。