巧用 Vue 3 provide / inject，轻松实现组件间数据共享

2023-10-24 02:01:11

Vue 3 中的 provide / inject 机制是一种强大的工具，可以轻松实现组件间的数据共享，而无需使用繁琐的 props 传递。通过 provide / inject，您可以轻松地将数据从父组件传递给子组件，或在不同组件之间共享数据。

何时使用 provide / inject？

provide / inject 通常在以下情况下使用：

当您需要在组件树的深处共享数据时。
当您需要共享数据，但不想使用 props 时。
当您需要在组件之间共享函数或其他数据结构时。

如何使用 provide / inject？

要使用 provide / inject，您需要执行以下步骤：

在父组件中，使用 provide() 方法提供数据。
在子组件中，使用 inject() 方法注入数据。

实例

现在，让我们通过一个简单的示例来理解 provide / inject 的用法。假设您有一个顶部的 logo 组件，当点击该 logo 时，需要切换侧边栏的显示或隐藏状态。您可以使用 provide / inject 来实现此功能，而无需在组件之间传递 props。

<!-- 父组件 -->
<template>
  <div>
    <logo @click="toggleSidebar" />
    <sidebar v-if="showSidebar" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      showSidebar: false
    }
  },
  methods: {
    toggleSidebar() {
      this.showSidebar = !this.showSidebar
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <button @click="toggleSidebar">切换侧边栏</button>
  </div>
</template>

<script>
export default {
  setup() {
    const showSidebar = inject('showSidebar')
    const toggleSidebar = inject('toggleSidebar')

    return {
      showSidebar,
      toggleSidebar
    }
  }
}
</script>

在上面的示例中，父组件使用 provide() 方法提供了 showSidebar 和 toggleSidebar 数据，子组件使用 inject() 方法注入了这两个数据。当点击 logo 时，父组件调用 toggleSidebar() 方法，将 showSidebar 的值取反，从而切换侧边栏的显示或隐藏状态。