uniapp 如何监听事件或数据变化

在uniapp中，如何监听组件的事件或数据变化？比如我想在数据更新时执行某些操作，或者监听子组件触发的事件，应该使用什么方法？有没有类似Vue的watch或者事件监听机制？具体代码该怎么写？

2 回复

uniapp中监听事件可用@事件名，如@click。监听数据变化用watch或computed。watch用于监听特定数据变化执行逻辑，computed用于依赖数据变化自动计算新值。


在 UniApp 中，监听事件或数据变化主要通过以下几种方式实现，具体取决于场景：

1. 监听数据变化（响应式数据）

  • 使用 Vue 的 watch 选项或 $watch 方法监听数据变化。
  • 示例代码：
    export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  watch: {
    // 监听 message 变化
    message(newVal, oldVal) {
      console.log('数据变化:', oldVal, '->', newVal)
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Updated' // 触发监听
    }
  }
}
  • 使用 $watch 动态监听：
    this.$watch('message', (newVal, oldVal) => {
  console.log('动态监听:', newVal)
})

2. 监听自定义事件

  • 父子组件间通过 $emit 触发事件，$on 监听（注意：UniApp 中通常用于 Vue 组件）。
  • 示例代码：
    • 子组件触发事件：
      this.$emit('customEvent', { data: 'example' })
    • 父组件监听：
      <child-component @customEvent="handleEvent"></child-component>

      methods: {
  handleEvent(payload) {
    console.log('收到事件:', payload)
  }
}

3. 全局事件总线

  • 使用 Vue 实例作为事件中心，跨组件通信。
  • 示例代码：
    • 创建事件总线（如 bus.js）：
      import Vue from 'vue'
export default new Vue()
    • 组件中监听与触发：
      import bus from './bus.js'

// 监听事件
bus.$on('globalEvent', (data) => {
  console.log('全局事件:', data)
})

// 触发事件
bus.$emit('globalEvent', { key: 'value' })

4. 监听页面生命周期

  • 使用 UniApp 页面生命周期函数（如 onLoad、onShow）。
  • 示例代码：
    export default {
  onShow() {
    console.log('页面显示，监听数据或状态')
  },
  onHide() {
    console.log('页面隐藏')
  }
}

5. 监听原生事件

  • 如页面滚动、触摸事件，通过 @ 绑定。
  • 示例代码：
    <view @touchstart="handleTouchStart" @scroll="handleScroll">
  内容
</view>

    methods: {
  handleTouchStart() {
    console.log('触摸开始')
  },
  handleScroll() {
    console.log('页面滚动')
  }
}

注意事项：

  • 使用 watch 时避免深度监听大型对象，以防性能问题。
  • 事件监听后，在组件销毁时（如 onUnload）用 $off 移除避免内存泄漏。
  • 跨页面通信可结合全局事件总线或 Vuex 状态管理。

根据具体需求选择合适的方法，例如数据驱动用 watch，组件交互用自定义事件。

回到顶部