uni-app怎么在A页面调用B页面的方法

uni-app怎么在A页面调用B页面的方法
我想在第三图调用图一和图二里面的sendNum方法，应该怎么写呀

img

img

img

父子组件通信 , bus , vuex 都行

TechWhizKid参考GPT回答：

  • 几种方式可以解决组件之间的通信问题：
  1. 用props和$emit：父组件通过props向子组件传递数据，子组件通过$emit向父组件发送事件。
  2. 用事件总线：你可以创建一个新的Vue实例作为事件总线，然后在一个组件中通过$emit触发事件，在另一个组件中通过$on监听事件。
  3. 用Vuex：Vuex是Vue的官方状态管理工具，可以用来管理多个组件共享的状态。
  4. 用uni-app的全局事件：你可以在一个页面中通过uni.$emit触发事件，在另一个页面中通过uni.$on监听事件。
  • 你提供的代码已经用了uni-app的全局事件，所以你只要在一个页面中通过uni.$emit触发事件，在另一个页面中通过uni.$on监听事件，然后在监听函数中调用相应的方法即可。
    例如，在图三中，你可以通过uni.$emit触发一个事件：
methods: {
  someMethod() {
    uni.$emit('callSendNum');
  }
}

然后在图二中，你可以通过uni.$on监听这个事件，然后调用sendNum方法：

mounted() {
  this.getData();
  uni.$on('index:popToggle', this.getData);
  uni.$on('callSendNum', this.sendNum); // 监听事件并调用方法
},

beforeDestroy() {
  uni.$off('index:popToggle',this.getData);
  uni.$off('callSendNum', this.sendNum); // 销毁监听
},

由于你是在mounted钩子函数中注册的监听，所以要记得在beforeDestroy钩子函数中取消监听，避免引起内存泄漏。

基于new bing部分指引作答：
在uni-app中，可以通过uni.navigateTo方法在页面之间进行跳转，并且可以通过传递参数的方式进行页面间的数据传递。要在A页面调用B页面的sendNum方法，可以按照以下步骤进行操作：

在B页面的methods中定义一个名为sendNum的方法，用于接收A页面传递的参数：

export default {
  methods: {
    sendNum(num) {
      console.log('Received number:', num);
      // 处理接收到的参数
    }
  }
}

在A页面中使用uni.navigateTo方法跳转到B页面，并传递参数给B页面的sendNum方法。可以在A页面的某个事件处理函数中调用以下代码：

uni.navigateTo({
  url: '/pages/B/B?num=123', // 传递参数num=123
  success: function() {
    console.log('跳转成功');
  }
});

在B页面的onLoad生命周期方法中获取A页面传递的参数，并调用sendNum方法进行处理：

export default {
  onLoad(options) {
    if (options.num) {
      this.sendNum(options.num);
    }
  },
  methods: {
    sendNum(num) {
      console.log('Received number:', num);
      // 处理接收到的参数
    }
  }
}

这样，在A页面中跳转到B页面时，会将参数num的值传递给B页面的sendNum方法，并在B页面中进行处理。

可以使用uniapp自带的api，uni.$emit进行跨页面通信
a页面

uni.$emit("方法名",参数)

b页面

uni.$on("方法名",function (参数) {
调用具体的方法
})

https://uniapp.dcloud.net.cn/api/window/communication.html

uniapp - 在A页面调用B页面的方法
一、建立中转站
建立 util.js 中转站文件（任意位置,我是在/assets/js/util.js）

import Vue from 'vue'
export default new Vue

在 uni-app 中，在 A 页面调用 B 页面的方法可以通过以下步骤实现：

  1. 在 B 页面的 export default 中，将需要暴露的方法赋值给 uni.$emit，例如：
export default {
  data() {
    return {
      message: 'Hello World'
    }
  },
  methods: {
    showMessage() {
      console.log(this.message);
    }
  },
  mounted() {
    uni.$emit('showMessage', this.showMessage);
  }
}

在这个示例中，我们在 B 页面的 mounted 钩子函数中，将 this.showMessage 方法赋值给了 uni.$emit('showMessage', this.showMessage)，其中 showMessage 是事件名称，this.showMessage 是需要暴露的方法。

  1. 在 A 页面，使用 uni.$on 事件监听器来监听 B 页面触发的事件，并调用需要执行的方法。例如：
<template>
  <view>
    <button @click="showBPageMethod">Call Bpage Method</button>
  </view>
</template>

<script>
export default {
  methods: {
    showBPageMethod() {
      uni.$on('showMessage', (showMessageMethod) => {
        showMessageMethod(); // 调用 B 页面的 showMessage 方法
      });
      uni.navigateTo({
        url: '/pages/B/B'
      });
    }
  }
}
</script>

在这个示例中，我们在 A 页面的 showBPageMethod 方法中，使用 uni.$on 方法监听事件 showMessage，并等待 B 页面执行完 mounted 钩子函数后触发该事件。然后，我们调用 uni.navigateTo 方法打开 B 页面。

当 B 页面触发 showMessage 事件时，A 页面中的 showBPageMethod 方法会被调用，并执行 B 页面中已经暴露出来的方法。

需要注意的是，为了保证事件被及时触发和监听，建议将 uni.$emit 和 uni.$on 方法放在组件的生命周期钩子函数中，例如 mounted，created 等。