Vue 中使用 provide 和 inject 实现跨层级传递数据的技巧

Vue 中使用 provide 和 inject 实现跨层级传递数据的技巧

在 Vue 组件化开发过程中，经常遇到需要传递数据的情况。Vue 提供了 props 和 vuex 等方式来实现组件之间的数据传递，但是在多层级、多组件嵌套的情况下，这些方式就显得有些力不从心。这时，我们就可以使用 Vue 的 provide 和 inject 选项来实现跨层级传递数据。

1. provide 和 inject 的概念与用法

provide 和 inject 是 Vue 2.2.0 中新增的选项，它们的作用分别是：

- provide：用于提供数据，可以是一个对象或一个函数。

- inject：用于注入数据，可以是一个数组或一个对象。

我们可以通过 provide 提供一个数据，然后在子组件中使用 inject 注入这个数据。下面是一个示例：

// 父组件
export default {
  provide: {
    temperature: 0.6
  },
  ...
}
// 子组件
export default {
  inject: ['temperature'],
  ...
}

这样，子组件就可以通过 this.temperature 访问到父组件提供的 temperature 数据。

需要注意的是，provide 和 inject 可能会造成代码的耦合，因为父组件需要知道子组件需要哪些数据。同时，由于 provide 和 inject 都是非响应式的，所以只有在父组件中提供的数据发生了变化，子组件才能够感知到变化。

2. 多层级传递数据

如果组件之间存在多层级嵌套，我们仍然可以使用 provide 和 inject 来传递数据。下面是一个示例：

// 祖先组件
export default {
  provide: {
    color: 'red'
  },
  ...
}
// 父组件
export default {
  inject: ['color'],
  ...
}
// 子组件
export default {
  inject: ['color'],
  ...
}

在这个示例中，祖先组件提供了一个 color 数据，父组件和子组件都通过 inject 注入了这个数据。这样，父组件和子组件都可以通过 this.color 访问到这个数据。

3. provide 和 inject 的值是非响应式的

需要注意的是，provide 和 inject 提供的值是非响应式的。这意味着，如果提供的值发生了变化，子组件不会自动更新视图。下面是一个示例：

// 父组件
export default {
  data() {
    return {
      color: 'red'
    }
  },
  provide() {
    return {
      color: this.color
    }
  },
  methods: {
    changeColor() {
      this.color = 'blue' // 提供的值发生了变化
    }
  }
}
// 子组件
export default {
  inject: ['color'],
  mounted() {
    console.log(this.color) // 输出 'red'
    this.color = 'green' // 子组件中修改注入的值
    console.log(this.color) // 输出 'green'
  }
}

在这个示例中，父组件中提供了一个 color 数据，并将其注入到子组件中。然后，父组件中修改了 color 数据的值，但是子组件并没有自动更新视图。另外，子组件中修改注入的值，虽然不会影响父组件中的值，但是也不会发出任何警告。

4. 动态提供数据

在 Vue 2.3.0 中，provide 和 inject 支持动态提供数据。这意味着，我们可以使用函数来提供数据，从而实现根据条件动态提供数据。下面是一个示例：

// 父组件
export default {
  data() {
    return {
      color: 'red'
    }
  },
  provide() {
    return {
      color: () => this.color // 使用函数动态提供数据
    }
  },
  methods: {
    changeColor() {
      this.color = 'blue'
    }
  }
}
// 孙组件
export default {
  inject: ['color'],
  mounted() {
    console.log(this.color()) // 输出 'red'，调用函数获得最新值
  }
}

在这个示例中，父组件提供了一个 color 数据，并将其放在一个函数中进行动态提供。而孙组件中使用 this.color() 而不是 this.color 来访问这个数据，这样可以确保永远拿到最新值。

5. 总结

通过使用 provide 和 inject，我们可以实现跨层级、动态的数据传递。但是需要注意的是，这种方式可能造成代码的耦合，并且提供的数据是非响应式的，可能需要手动更新视图。因此，在使用时需要根据具体情况进行权衡。