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

最新推荐文章于 2023-06-01 11:33:42 发布
最新推荐文章于 2023-06-01 11:33:42 发布
阅读量128 收藏
点赞数
原文链接：http://www.cnblogs.com/jiajiayang/p/7121071.html
版权

今天用vue2 折腾spa的时候，遇到了这样的一个问题，有两个组件A和B，A和B不是父子组件，但是我需要在B组件中调用A组件的方法，官方文档找不到合适的答案，网上的相关资料也很少（原谅我懒得去FQGoogle）。

一番折腾之后，我想到ES6的基本语法，可以通过引入模块去调用方法，于是，我在B组件中以模块的方式引入了A组件，然后直接调用B组件的方法，成功了！

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

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

//B模块

import A from 'A的相对路径’

然后调用方法

A.methods.方法函数名()

这样就可以啦，很方便~

转载于:https://www.cnblogs.com/jiajiayang/p/7121071.html

weixin_30371469
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue非父子组件通信问题及解决方法
08-27
主要介绍了vue非父子组件通信问题及解决方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue 调用非父子组件的方法
slow097的博客
05-20 538
有两个组件A和B，A和B不是父子组件，但是我需要在B组件中调用A组件的方法 举个例子，A组件的methods里有一个add方法。 那我再B组件脚本开头引入 //B模块 import A from 'A的相对路径’ 然后调用方法 A.methods.方法函数名() ...
vue一个组件调用其他组件的方法（非父子组件）
记录
06-01 987
—B页面（组件）想调用 A页面(组件)中的方法；但是两个页面（组件）毫无关联（刷新 A的数据）然后就是在B 页面定义一个点击事件（举例），重新给 Vuex中的属性赋值就行了。2、被使用组件- A 页面（组件）3、使用触发页面-B 页面（组件）2、触发页面-B组件/发布事件。3、接收页面-A组件/订阅事件。这里我的当前组件要调用。的methods属性中。
初识 Vue（18）---（非父子组件间的传值）
姜皓的博客
07-28 953
非父子组件间的传值 常一个应用会以一棵嵌套的组件树的形式来组织：将一个大组件进行拆分 下图这种情况的组件间传值（父子组件间传值） 方法：父组件通过 Props 向子组件传值，子组件通过事件触发向父组件传值 下图这种情况的组件间传值（父子组件间隔代传值，也是非父子组件间传值） 方法：将第二层作为中间层，父组件（1）通过 Props 向子组件（2）传值，父组件（2）通过 Prop...
Vue(非)父子组件的传值以及方法调用
weixin_34085658的博客
12-24 403
1.vue父组件给子组件传值的方法<heador :userName="username"></heador>子组件中通过props接收传值props:{ username:{ type:String, default:"" }} 2.vue父组件调用子组件的方法<heador ref="head...
vue2.0父子组件及非父子组件之间的通信方法
08-31
本文将详细介绍 Vue 2.0 中父子组件以及非父子组件之间的通信方法。 1. **父组件传递数据给子组件** 在 Vue 中，父组件向子组件传递数据主要通过 `props` 属性。以下是一个简单的例子： 父组件（Parent）： ```...
详解Vue 非父子组件通信方法（非Vuex）
08-30
本篇文章主要介绍了详解Vue 非父子组件通信方法（非Vuex），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue通过ref父子组件拿值方法
10-18
在本文中，我们将深入探讨如何通过`ref`在父子组件之间传递和获取值。 首先，我们要了解`ref`的基本用法。在Vue组件模板中，我们可以给任何元素或组件添加一个`ref`属性，它的值是一个字符串，这个字符串将会作为该...
vue记事本案例（父子组件通信）
最新发布
08-20
在这个"vue记事本案例"中，我们重点探讨的是Vue.js中的父子组件通信，以及如何实现新增待办、删除待办（一键清空）、待办数量统计和持久化存储功能。 首先，让我们关注父子组件通信。在Vue.js中，父子组件之间的...
Vue2.x中的父子组件相互通信的实现方法
08-30
而事件总线则是一个简单的Vue实例，用于在非父子组件之间传递消息，它提供了一种松耦合的通信方式。 总结来说，Vue2.x中的父子组件通信主要包括以下几点： 1. 父组件通过`props`向下传递数据给子组件。 2. 子组件...
vue 进阶教程之：非父子组件通信方法（非Vuex）
MYuanFang的博客
05-16 2292
转载：https://www.jianshu.com/p/d3036001f6d3 很实用，需要的朋友可以进去看下
Vue调用其他组件的方法（非父子组件）
weixin_42390534的博客
07-04 4244
问题 最近有个问题就是我想: B页面（组件）想调用 A页面(组件)中的方法；但是两个页面（组件）毫无关联（刷新 A的数据）； 解决思路 使用 VueX 定义一个属性 ，然后 在A页面 定义一个计算属性（computed） 再把 vuex 的属性返回给它， 在监听这个计算属性，发生变化就调用你要执行的方法 // Vuex 全局 state: { tableStatus:false } mutations:{ changeStatus(state,status) { //
Vue 进阶教程之：非父子组件通信方法（非Vuex）
正在崛起的博客
01-11 441
一提到两个非父子组件通信方法，有经验的 coder 肯定会说用 Vuex 啊，我个人建议不要为了用 Vuex 而用 Vuex，除非你的项目很大，耦合度很高，需要大量的储存一些 data，组件之间通信频繁。当然还是要根据自己的业务场景的来决定，总之还是那句话，不要为了用 Vuex 而用 Vuex！ Vue 官网介绍了非父子组件通信方法： 不过官网说的太简单了，新手看完估计还是
vue2.0之非父子组件通信
Tank_in_the_street的博客
06-11 1135
在vue的1,0版本里，组件之间的通信是通过$dispatch和$broadcast来进行通信的，但是在2.0版本里面则取消上述这两个方法，并提出了新的解决办法。关于vue2.0的父子组件的通信上文也有讲过，现在要讲的是非父子组件。     在vue官网中，官方推荐使用eventBus来进行非父子组件的通信，本文现在演示在项目中如何实现非父子组件通信。首先在父组件(App.vue)里，有两个子组
vue如何实现父子组件通信，以及非父子组件通信（待看）
melody_day的博客
12-08 4156
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 非父子(非兄弟)组件之间相互调用方法的解决方法
lingshui147的博客
04-19 1703
最近在一个项目里发现，如果A、B两个组件之间既不是父子组件也不是兄弟组件，那个我想执行A组件的方法去调用B组件的方法,这应该怎么解决呢？ 我们都知道正常情况下父子组件相互调用方法可以使用$emit去调用，或者兄弟组件之间可以使用eventBus传值，但是如果遇到两个组件之间没有任何关系的，上面这两种方法都不会起作用，我突然想到我的项目里有使用到vuex,那么我可不可以使用vuex来实现我的需求呢？我的解决方法就是，vuex 设定一个status变量 ，执行A组件方法，改变replayStatus为t.
vue组件传值，非父子有五种
tsang荒男的博客
12-10 2021
目录前言1、父组件向子组件传值1.1、props1.2、provide / inject2、子组件向父组件传值2.1、 this.$emit()2.2、 通过 callback 函数2.3、通过 $parent / $children 或 $refs 访问组件实例2.4、 $attrs / $listeners3、非父子组件之间传值3.1、$emit 和 props3.2、Bus总线程通信3.3、Vuex3.4、provide / inject3.5、 $attrs / $listeners 前言 Vue的
VUE中父子组件间参数，方法的调用；以及非父子组件之间参数的调用。
Always on the road
08-01 2828
今天趁完成任务的缝隙时间，总结了一下这几天用到的在VUE组件之间的参数调用，以及调用另外一个页面的函数的方法，有任何的问题也会不断的更新修改。 （1）父级调用子级的函数 场景：两个vue页面：one.vue和two.vue 实现：在one.vue中调用two.vue中的getDetail()方法 代码：我们在one.vue中这样写： &lt;template&gt; &lt;t...
vue非父子组件方法调用
04-29
在 Vue 中，非父子组件之间的通信可以通过事件总线（EventBus）来实现。事件总线是一个空的 Vue 实例，可以用它来触发和监听事件。 首先，在一个单独的文件中创建一个事件总线： ```javascript import Vue from '...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值