uniapp中app.vue中切换时会生成多个fixed.vue,实际上并没有销毁,导致data变量值变更赋值混乱,怎么只生成一个,或者变量值不混乱赋值呢?

uniapp中app.vue中注册路由跳转监听,触发时uni.$meit('update'),每个路由页面都会引入一个公共的组件fixed.vue,切换时会生成多个fixed.vue,实际上并没有销毁,导致data变量值变更赋值混乱,怎么只生成一个fixed.vue,或者变量值不混乱赋值呢?
app.vue
let that = this;

uni.addInterceptor('navigateTo', { //监听跳转
  success (e) {
    that.watchRouter();

  }
})
uni.addInterceptor('redirectTo', { //监听关闭本页面跳转
  success (e) {
    that.watchRouter();

  }
})
uni.addInterceptor('switchTab', { //监听tabBar跳转
  success (e) {
    that.watchRouter();

  }
})
uni.addInterceptor('navigateBack', { //监听返回
  success (e) {
    that.watchRouter();

  }
})

watchRouter () {

  console.log('路由进行跳转-----');
  uni.$emit('page-popup')

},

fixed.vue 每个路由页面都会直接引入<common-fixed :key="new Date().getTime()"></common-fixed>
mounted () {

console.log('mounted111111111');
let _this = this
//isChange默认是1
uni.$on('page-popup', () => {
  console.log('收到了');
  // this.isChange = true;
  setTimeout(() => {
    _this.isChange = 2
    debugger;
  }, 3000)

})

},

阅读 197
avatarAI BotBETA

这个问题涉及到的是Vue组件的生命周期和uni-app的路由跳转机制。在uni-app中,当你在app.vue中注册路由跳转监听并触发uni.$emit('page-popup')时,每个路由页面都会引入一个公共的组件fixed.vue。由于每次路由跳转都会引入新的fixed.vue组件实例,这就导致了多个fixed.vue实例的存在,并且它们之间共享相同的data变量,导致变量值混乱。

要解决这个问题,有几种可能的方案:

  1. 只生成一个fixed.vue实例
* 你可以通过在全局范围内定义一个唯一的标识符(例如,使用一个唯一的ID或者基于路由的唯一标识符),并在fixed.vue的key属性中使用这个标识符,以确保每次路由跳转时都复用同一个fixed.vue实例。这样,所有对fixed.vue实例的修改都会反映在同一个实例上,避免了变量的混乱。
* 在fixed.vue中,你可以使用`this.$root`来访问根Vue实例,并使用`this.$root.$refs`来访问其他组件实例。这样,你就可以在fixed.vue中访问和修改其他组件的数据。
  1. 避免使用uni.$emit进行事件传递
* 如果你不需要在多个组件之间传递事件,可以考虑使用其他方式来实现你的需求。例如,你可以在fixed.vue中直接使用`this.$on('event', callback)`来监听事件,而不是通过uni.$emit触发事件。这样,你就可以避免在多个组件之间传递事件,从而减少混乱的可能性。
  1. 使用Vuex进行状态管理
* 如果你的应用中存在多个组件共享状态的情况,可以考虑使用Vuex进行状态管理。Vuex可以帮助你管理组件之间的状态,并提供了一套完整的状态管理流程和工具。通过Vuex,你可以将共享的状态存储在一个单独的store中,并在需要时访问和修改状态。这样,你可以避免在不同组件之间共享状态导致的混乱问题。

以上是几种可能的解决方案,你可以根据你的具体情况选择适合的方法来解决你的问题。如果你需要更具体的代码示例或者进一步的帮助,请提供更多的细节和代码示例。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏