vue中provide & inject

Vue中的provide和inject是用于在组件之间进行属性传递的机制。

在父组件中，我们可以使用provide选项来定义我们想要传递给子组件的属性。provide选项是一个对象，其中的属性和值将会被传递给子组件。例如：

provide: {
  message: 'Hello from parent component'
}

在子组件中，我们可以使用inject选项来接收父组件提供的属性。inject选项是一个数组，其中的元素是需要从父组件中接收的属性的名称。例如：

inject: ['message']

然后，在子组件中就可以直接使用这个属性了：

mounted() {
  console.log(this.message); // 输出：Hello from parent component
}

需要注意的是，provide和inject并不是响应式的。也就是说，如果父组件中的属性发生变化，子组件并不会自动更新。如果需要在子组件中响应父组件属性的变化，可以使用计算属性或者watch来实现。

此外，还可以通过provide和inject实现跨级组件之间的属性传递。只要在提供属性的父级组件中使用provide提供属性，在需要接收属性的子级组件中使用inject接收属性即可。