在 Vue.js 中：如何在第一个子组件的 created() 钩子中等待第二个子组件的 created() 钩子路由查询变更？

2024-03-24 04:33:50

在 Vue.js 中，如何在第一个子组件的 created() 钩子中等待第二个子组件的 created() 钩子路由查询变更？

引言

在 Vue.js 项目中，我们经常需要在子组件之间进行沟通和协调。在某些情况下，我们需要在第一个子组件的 created() 钩子中等待第二个子组件的 created() 钩子中路由查询的变更。本文将深入探讨这一问题并提供一个优雅的解决方案。

问题

考虑一个场景，我们有一个父组件，其中包含两个子组件，即子组件 A 和子组件 B。在子组件 A 中，我们在 created() 钩子中更新了路由查询。在子组件 B 中，我们也在 created() 钩子中更新了另一个路由查询参数，该参数依赖于子组件 A 中路由查询中的一个参数。

然而，问题在于我们希望在更新子组件 B 中的路由查询之前，等待子组件 A 中的路由查询更新完成。这是因为子组件 B 中的路由查询更改依赖于子组件 A 中的路由查询参数。

解决方案：使用 watch() 函数和事件监听

为了解决这个问题，我们可以利用 Vue.js 的 watch() 函数和事件监听机制。

在子组件 A 中，我们在 created() 钩子中更新路由查询，然后使用 watch() 函数监视该查询的变化：

// 子组件 A
export default {
  created() {
    // 更新路由查询
    this.$router.replace({
      query: {
        ...this.$route.query,
        param1: 'var1'
      }
    })

    // 监听路由查询的变化
    this.$watch('$route.query.param1', (newValue, oldValue) => {
      // 当路由查询更改时执行此函数
      if (newValue !== oldValue) {
        // 更新子组件 B 中的路由查询
        this.$emit('update-route-query', newValue)
      }
    })
  }
}

在子组件 B 中，我们在 created() 钩子中监听从子组件 A 触发的事件，然后在接收到该事件时更新自己的路由查询：

// 子组件 B
export default {
  created() {
    // 监听从子组件 A 触发的事件
    this.$on('update-route-query', (newValue) => {
      // 更新路由查询
      this.$router.replace({
        query: {
          ...this.$route.query,
          param2: newValue
        }
      })
    })
  }
}