f***@126.com
f***@126.com
  • 发布:2019-09-19 13:32
  • 更新:2023-06-20 06:13
  • 阅读:17762

请问uni-app中app.vue中定义的方法,其他页面如何调用

分类:uni-app

请问uni-app中App.vue中定义的方法函数,其他页面如何调用

2019-09-19 13:32 负责人:无 分享
已邀请:
小黑马

小黑马 - 我就是小黑马

getApp().方法()

DCloud_UNI_GSQ
  • f***@126.com (作者)

    这个只能获取对象,写在App.vue里面的函数怎么在其他页面调用?

    2019-09-19 15:37

  • 2***@qq.com

    回复 f***@126.com: 在onShow的时候存一个app的对象在globalData中,其他页面获取过来就行了

    2021-09-09 11:24

5***@qq.com

5***@qq.com - 开发者小太阳

我也有同样的困扰,请问你解决了吗?怎么做滴呀?

  • f***@126.com (作者)

    没有解决,只是在需要的页面再定义了个方法

    2020-01-15 14:05

  • 5***@qq.com

    回复 f***@126.com: 有办法了。把function定义到globalData里面去,在页面用 app.globalData.xxx()可调用.

    2020-02-26 14:45

  • 3***@qq.com

    回复 5***@qq.com: 解决方案可以贴下图吗

    2020-03-30 16:57

dasensen

dasensen - 刘伟森

你试试这样可以吗
在app里面定义个对象,对象里面定义一个函数 比如getdata:{a(){console.log(1)}}

8***@qq.com

8***@qq.com

可以在app.vue的methods中定义方法,其他页面可以调用

  • c***@126.com

    这样可以用,但是无法使用main里面定义的函数,H5正常调用,到小程序中就是未定义了

    2020-10-22 23:15

全栈工程师

全栈工程师 - 精通mui、uniapp,承接相关项目外包,解决各种疑难问题。有任何问题可以随时联系,QQ:419761282

使用 globalData

LAO_WUUAN

LAO_WUUAN

在其他页面中调用App.vue定义的方法函数有两种方法:  

1. this.$parent.methodName(): 在其他页面中使用 this.$parent 来获取App.vue组件实例,然后调用方法函数。  

例如,在其他页面的 methods 中定义一个方法来调用App.vue中的 onShow 方法:  

```javascript  
methods: {  
  onLoad() {  
    const app = this.$parent // 获取App.vue组件实例  
    app.onShow() // 调用App.vue中的onShow方法  
  }  
}
  1. 使用事件派发:在App.vue中使用 $emit 触发自定义事件,其他页面在组件中使用 v-on 监听到事件后执行相应的方法。

例如,在App.vue中使用 created() 钩子函数触发 my-event 事件:

created() {  
  this.$emit('my-event', 'event data')  
}

在其他页面的模板中使用 v-on 监听 my-event 事件并执行相应的方法:

<template>  
  <div>  
    <p v-on:my-event="onMyEvent">监听my-event事件</p>  
  </div>  
</template>  

<script>  
export default {  
  methods: {  
    onMyEvent(data) {  
      console.log('收到my-event事件, 数据为', data)  
      // 处理业务逻辑  
    }  
  }  
}  
</script>

这两种方法可以根据具体实际情况选用。一般情况下,建议使用第一种方法来调用App.vue定义的方法函数。

要回复问题请先登录注册