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

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

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

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

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

//B模块

import A from ‘A的相对路径’

然后调用方法

A.methods.方法函数名()

这样就可以啦，很方便~

时间： 2024-08-27 21:36:46

vue2 调用非父子组件方法的方式的相关文章

小程序开发组件定义(封装)、组件调用、父子组件方法调用、父子组件传值通讯

在小程序开发中,为了提高代码效率,和代码使用率,我们也用到了组件封装, 今天我介绍下如何在小程序中封装一个头部公用组件首先,所有父组件(调用页面)的json文件都要引用子组件:index.json { "usingComponents": { "header": "../../component/header/header", } } 一,组件定义(封装) 子组件:header.wxml <view name='header' class

Vue2.0的三种常用传值方式、父传子、子传父、非父子组件传值

Vue常用的三种传值方式有: 父传子子传父非父子传值引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递.父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息 1. 父组件向子组件进行传值父组件: <template> <div> 父组件: <input type="text" v-model="name">  <child :abc=

vue2.0父子组件以及非父子组件如何通信

1.父组件 >>> 子组件父组件数据如何传递给子组件呢?可以通过props属性来实现父组件: <parent> <child :child-msg="msg"></child> //这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] }; } 子组件通过props来接收数据: 方式1: props: ['childMsg'] 方式2 : props: { chi

【vue】父组件主动调用子组件 /// 非父子组件传值

一父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="header"></v-header> <hr> 首页组件 <button @click="getChildData()">获取子组件的数据和方法</button> </div> 父组件主动获取子组件的数据和方法: 1

vue 2 使用Bus.js进行兄弟(非父子)组件通信简单案例

vue2中废弃了$dispatch和$broadcast广播和分发事件的方法.父子组件中可以用props和$emit().如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通信的兄弟组件之中,都引入Bus,之后通过分别调用Bus事件触发和监听来实现组件之间的通信和参数传递. 首先需要在任意地方添加一个bus.js 在bus.js里面写入下面信息 1 import Vue from 'vue' 2 export default new Vue; 在需要通信的组件都引入B

父子，子父，非父子组件通信

父子组件通信父亲的数据给子集父组件向子组件传值 ??? 子组件在props中创建一个属性,用于接收父组件传过来的值: ??? 父组件引入子组件-->注册子组件-->引用子组件: ??? 在子组件标签中添加子组件props中创建的属性: ??? 将所要传递的值赋值给该属性. props: prop类型:通常你希望每个prop都有指定的数据类型,你可以以对象的形式列出prop,对象的属性的名称和值分别对应了prop的值和类型. 单向数据流:所有的prop都使得其父子prop形成一个单向数据流

非父子组件间传值（一）

非父子组件间传值有两种方法,一种是vuex共享数据,另一种是发布订阅模式/观察者模式/总线/Bus.这篇随笔主要总结总线机制的学习心得: 首先通过在Vue.prototype上挂载一个bus属性,指向vue实例:接下来在调用Vue或者创建组件时都会有bus属性. Vue.prototype.bus=new Vue() var Child={ props:['content'], data:function() { return {num:this.content} }, //因为vue是单项数据

Vue父子组件及非父子组件如何通信

1.父组件传递数据给子组件父组件数据如何传递给子组件呢?可以通过props属性来实现父组件: 子组件通过props来接收数据: 方式1: 方式2 : 方式3: 这样呢,就实现了父组件向子组件传递数据. 2.子组件与父组件通信那么,如果子组件想要改变数据呢?这在vue中是不允许的,因为vue只允许单向数据传递,这时候我们可以通过触发事件来通知父组件改变数据,从而达到改变子组件数据的目的. 父组件: 3.非父子组件通信如果2个组件不是父子组件那么如何通信呢?这时可以通过eventHub来实现

非父子组件间的传值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>非父子组件间的传值(Bus/总线/发布订阅模式/观察者模式)</title> <script src="./vue.js"></script> </head> <body> <div