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