vue 非父子(非兄弟)组件之间相互调用方法的解决方法

最新推荐文章于 2023-06-01 11:33:42 发布
置顶 最新推荐文章于 2023-06-01 11:33:42 发布
阅读量1.6k 收藏 3
点赞数 1
文章标签： vue vue.js javascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lingshui147/article/details/115862545
版权

最近在一个项目里发现，如果A、B两个组件之间既不是父子组件也不是兄弟组件，那个我想执行A组件的方法去调用B组件的方法,这应该怎么解决呢？ 我们都知道正常情况下父子组件相互调用方法可以使用$emit去调用，或者兄弟组件之间可以使用eventBus传值，但是如果遇到两个组件之间没有任何关系的，上面这两种方法都不会起作用，我突然想到我的项目里有使用到vuex,那么我可不可以使用vuex来实现我的需求呢？我的解决方法就是，vuex 设定一个status变量

 ，执行A组件方法，改变replayStatus为true,在B组件里使用watch监听replayStatus,当监听到replayStatus为true的时候就执行B组件的方法，这样就可以完美解决！

 

程序员-蓝天
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
详解Vue 非父子组件通信方法（非Vuex）
08-30
本篇文章主要介绍了详解Vue 非父子组件通信方法（非Vuex），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue调用其他组件的方法（非父子组件）
weixin_42390534的博客
07-04 4236
问题 最近有个问题就是我想: B页面（组件）想调用 A页面(组件)中的方法；但是两个页面（组件）毫无关联（刷新 A的数据）； 解决思路 使用 VueX 定义一个属性 ，然后 在A页面 定义一个计算属性（computed） 再把 vuex 的属性返回给它， 在监听这个计算属性，发生变化就调用你要执行的方法 // Vuex 全局 state: { tableStatus:false } mutations:{ changeStatus(state,status) { //
vue一个组件调用其他组件的方法（非父子组件）
最新发布
记录
06-01 972
—B页面（组件）想调用 A页面(组件)中的方法；但是两个页面（组件）毫无关联（刷新 A的数据）然后就是在B 页面定义一个点击事件（举例），重新给 Vuex中的属性赋值就行了。2、被使用组件- A 页面（组件）3、使用触发页面-B 页面（组件）2、触发页面-B组件/发布事件。3、接收页面-A组件/订阅事件。这里我的当前组件要调用。的methods属性中。
Vue3实现非父子组件通信
stay hungry, stay foolish
04-04 1324
方式一：provide/inject // 父组件传递数据 provide: { msg: "我是小仙女", emotion: "超级开心" } //接收数据的组件 inject:['msg','emotion'] 注意：provide中定义的数据不能在本组件中使用 一般provide最好返回一个对象，可以获取到data中的数据。要想provide中数据变成响应式的，用computed包裹。 import {computed} from 'vue' // 向非父组件传递数据
vue3 非父子组件通信
你怎么也喜欢嘴巴嘟嘟
10-06 728
业务场景是，不是父子组件实现通信 文件目录 第一种方法 App.vue <template> <div> <Home></Home> <button @click="addName">增加名字</button> </div> </template> <script> import Home from "./Home.vue"; import { computed } fro
vue2.0父子组件及非父子组件之间的通信方法
08-31
本文将详细介绍 Vue 2.0 中父子组件以及非父子组件之间的通信方法。 1. **父组件传递数据给子组件** 在 Vue 中，父组件向子组件传递数据主要通过 `props` 属性。以下是一个简单的例子： 父组件（Parent）： ```...
如何在Vue的父子组件之间传递数据和调用方法
01-08
然鹅 在默认情况下 子组件中是无法访问到父组件中的data数据和methods中的方法的 父组件可在在引用的时候通过属性绑定(v-bind)的方式将将需要传递给子组件的数据传递给子组件 然后 在子组件中通过props属性进行定义...
Vue中父子组件的值传递与方法传递
10-14
在Vue框架中，父子组件之间的通信是至关重要的，它允许组件之间进行数据交换和功能调用，从而构建复杂的交互逻辑。以下将详细讲解Vue中父子组件的值传递和方法传递。 一、Vue中父组件向子组件传值 在Vue中，父组件...
vue.js中父组件调用子组件的内部方法示例
10-19
主要给大家介绍了关于vue.js中父组件调用子组件内部方法的相关资料，文中给出来了详细的示例代码供大家参考学习，对大家的学习或者工作具有一定的参考价值，需要的朋友们下面随着小编来一起学习学习吧。
vue2 调用非父子组件方法的方式
weixin_30371469的博客
07-05 127
今天用vue2 折腾spa的时候，遇到了这样的一个问题，有两个组件A和B，A和B不是父子组件，但是我需要在B组件中调用A组件的方法，官方文档找不到合适的答案，网上的相关资料也很少（原谅我懒得去FQGoogle）。 一番折腾之后，我想到ES6的基本语法，可以通过引入模块去调用方法，于是，我在B组件中以模块的方式引入了A组件，然后直接调用B组件的方法，成功了！ 举个例子，A组件的methods里有...
Vue 进阶教程之：非父子组件通信方法（非Vuex）
正在崛起的博客
01-11 440
一提到两个非父子组件通信方法，有经验的 coder 肯定会说用 Vuex 啊，我个人建议不要为了用 Vuex 而用 Vuex，除非你的项目很大，耦合度很高，需要大量的储存一些 data，组件之间通信频繁。当然还是要根据自己的业务场景的来决定，总之还是那句话，不要为了用 Vuex 而用 Vuex！ Vue 官网介绍了非父子组件通信方法： 不过官网说的太简单了，新手看完估计还是
【vue非父子关系的组件，实现相互调用】
weixin_44665318的博客
03-15 363
建立 util.js 中转站文件（任意位置都可以,我是在 src/js/util.js）vm.$on( event, fn );//监听event事件后运行 fn；vm.$ emit( event, arg ) //触发当前实例上的事件。
Vue非父子组件通信的几种方式
joey_hao的博客
02-28 1890
文章目录1.provide和inject1.1基本使用1.2如何处理响应式数据 1.provide和inject provide/inject主要适用于在一些深入嵌套的组件中，子组件想要获取父组件的部分内容的情况，此时可以在父组件中使用provide来提供数据，在子组件中使用inject来获取并使用这些数据（我们可以将依赖注入看作是“长距离的 prop”） 1.1基本使用 //父组件 data(){ return{ books:['javascript', 'vue', '
VUE中父子组件间参数，方法的调用；以及非父子组件之间参数的调用。
Always on the road
08-01 2826
今天趁完成任务的缝隙时间，总结了一下这几天用到的在VUE组件之间的参数调用，以及调用另外一个页面的函数的方法，有任何的问题也会不断的更新修改。 （1）父级调用子级的函数 场景：两个vue页面：one.vue和two.vue 实现：在one.vue中调用two.vue中的getDetail()方法 代码：我们在one.vue中这样写： &lt;template&gt; &lt;t...
微信小程序两个非父子组件之间实时通讯
fankse的博客
02-24 627
问题：解决a页面数据变化，b页面实时响应的问题 解决办法： 在app。js中定义有一个全局变量，对这个变量进行监听 globalData: { APIBaseURL: "", // api基础URL imageBaseURL: "", // 图片基础URL socketURL: "", // socket基础URL authorization: "", // 登录态 account: '', recondNum:-1, }, //app
非父子组件之间监听和触发事件
weixin_42274795的博客
08-28 358
Vue3中使用mitter.on和mitter.emit 由于需要在调用一个不相关的非父子组件中的方法，无法使用父子组件之间调用方法的方式，因此对事件进行监听和调用。 $on():监听事件； $emit() 触发事件； 1、mitter.on 代码 对事件进行监听操作。 mitter.on('ToolControlHide', () => { showBox.value = false }) 2、mitter.emit代码 在方法或者事件中直接调用，触发事件。 const ToolC
Vue + typecript 实现非父子组件通信，关于mitt的封装。
Blog沙漏在下雨
04-22 1213
在Vue+ typescript 中， 如何封装好mitt实现非父子组件的通信， 同时如何解决 Ts2339的烦人bug。
React 系列八：非父子组件通信
XHSRookies的博客
07-21 347
快来加入我们吧！ "小和山的菜鸟们"，为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验，请您移至我们官网小和山的菜鸟们 ( https://xhs-rookies.com/ ) 进行学习，及时获取最新文章。 "Code tailor" ，如果您对我们文章感兴趣、或是想提一些建议，微信关注 “小和山的菜鸟们” 公众号，与我们取的联系，您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励！ 前言 这节我们将介绍 React 中非父子组件的通信，上节我们说到父子组件间的通信可通过
兄弟组件相互调用方法
weixin_43717148的博客
07-20 2849
需求：添加完数据调另一个页面的刷新数据方法 1、准备两个页面 为兄弟关系 <User> <UserInsert/> </UserTable/> </User> 2、table页面写上ref 3、insert页面添加完数据调用table页面的刷新方法 insert页面内 user页面内 ...
vue非父子组件方法调用
04-29
在 Vue 中，非父子组件之间的通信可以通过事件总线（EventBus）来实现。事件总线是一个空的 Vue 实例，可以用它来触发和监听事件。 首先，在一个单独的文件中创建一个事件总线： ```javascript import Vue from '...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值