轻松掌握Provide和Inject，助力你打造出众的Tab组件

2024-01-13 22:40:54

从表面上看，<provide> 和 <inject> 就是两个定义和传递prop的语法糖，但是仔细琢磨就会发现它们之间还是有很多不同的地方。了解这些区别将有助于你在组件通信过程中做出更好的选择。

使用 Provide 或 Inject 可以轻松地在组件之间传递数据。它们都是全局性的，这使它们非常适用于跨多个组件传递数据。此外，它们还可以避免为每个组件创建多个prop，从而使组件更容易维护。

无论是 Provide还是 Inject，都需要在 Vue 实例中进行调用。只有在实例中已经 Provide 了一个值，该值才能被 Inject 到其他组件中。所以，如果你想在孙子组件中使用 Inject，那么祖父组件中必须要先 Provide 该值。

接下来，我们创建一个具备头、主体和标签页的简单 Tabs 组件。

<template>
  <div>
    <ul>
      <li v-for="tag in tags" :key="tag" @click="selectTag(tag)">{{ tag }}</li>
    </ul>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'Tabs',
  provide() {
    return {
      selectedTag: this.selectedTag
    }
  },
  data() {
    return {
      tags: ['A', 'B', 'C'],
      selectedTag: 'A'
    }
  },
  methods: {
    selectTag(tag) {
      this.selectedTag = tag
    }
  }
}
</script>

这个组件利用 Provide 向所有子组件传递了 selectedTag 数据。

<template>
  <div>
    <h2>{{ header }}</h2>
    <p>{{ body }}</p>
  </div>
</template>

<script>
export default {
  inject: ['selectedTag'],
  props: {
    header: String,
    body: String
  }
}
</script>