在 Vue 组件中跨层级传递数据是一个常见的需求，对于这种情况，Vue 中提供了一些方便的工具来处理。其中，provide 和 inject 是一种常用的方式，它可以简化我们在组件之间传递数据的过程，今天我们就来详细介绍一下这个技巧。
一、什么是 provide 和 inject
在 Vue 组件中，provide 和 inject 是一种用于跨层级传递数据的方法。它们被称为祖先和后代之间可选的依赖注入。简而言之，可以通过祖先组件向后代组件传递数据，而无需通过 props 或事件派发器来进行。
1. provide
provide 是一个对象，其中可以包含我们想要传递给后代的属性或方法，这些属性或方法可以是状态或行为。其中，provide 可以是一个函数，它可以动态地获取返回值。
下面是一个简单的例子，我们在父组件中提供了一个 message 属性，子组件通过 inject 来接收这个属性：
// 父组件
Vue.component('parent-component', {
provide: {
message: 'Hello World'
},
template: `
<div>
<child-component></child-component>
</div>
`
});
// 子组件
Vue.component('child-component', {
inject: ['message'],
template: `
{{ message }}
`
});
可以看到，在父组件中，我们使用 provide 提供了一个 message 属性，它的值为 "Hello World"。在子组件中，我们使用 inject 来接收这个属性，然后将它显示在了模板中。这样，就实现了父组件向子组件传递数据的功能。
2. inject
inject 是一个数组，数组中的元素是字符串类型，每个字符串表示要从祖先组件中注入的属性名，注入的属性名需要与 provide 的属性名一致。
下面是一个更加复杂的例子，我们在祖先组件中提供了一个 show 方法，在孙子组件中调用了这个方法：
// 祖先组件
Vue.component('ancestor-component', {
provide() {
return {
show: this.show
};
},
methods: {
show() {
alert('Hello World');
}
},
template: `
<div>
<parent-component></parent-component>
</div>
`
});
// 父组件
Vue.component('parent-component', {
template: `
<div>
<child-component></child-component>
</div>
`
});
// 子组件
Vue.component('child-component', {
template: `
<div>
<grandson-component></grandson-component>
</div>
`
});
// 孙子组件
Vue.component('grandson-component', {
inject: ['show'],
mounted() {
this.show()
},
template: `
<div></div>
`
});
在祖先组件中，我们提供了一个 show 方法，并通过 provide 将它注入到了后代组件中。在孙子组件中，我们使用 inject 来接收这个方法，然后在 mounted 钩子函数中调用了它。
二、使用 provide 和 inject 实现跨组件传递方法和事件
通过上面的例子，我们已经了解了如何使用 provide 和 inject 实现数据传递。在 Vue 中，provide 和 inject 还可以帮助我们实现跨组件传递方法和事件，下面我们来具体了解一下。
1. 传递方法
通过 provide 和 inject 来传递方法，可以实现父子组件之间的方法调用，而无需通过事件来派发。
下面是一个简单的例子，我们在父组件中提供了一个 show 方法，子组件通过 inject 注入这个方法，并在模板中调用它：
// 父组件
Vue.component('parent-component', {
provide() {
return {
show: this.show
};
},
methods: {
show() {
alert('Hello World');
}
},
template: `
<div>
<child-component></child-component>
</div>
`
});
// 子组件
Vue.component('child-component', {
inject: ['show'],
template: `
<div>
<button @click="show()">Click Me!</button>
</div>
`
});
可以看到，在父组件中，我们提供了一个 show 方法，并通过 provide 把它注入到了子组件中。在子组件中，我们使用 inject 来接收这个方法，并在模板中调用了它。这样，就实现了父组件向子组件传递方法的功能。
2. 传递事件
在 Vue 组件中，我们可以使用 $emit 来派发事件。但是有时候，我们需要在父组件中监听子组件的事件，再进行相应的业务逻辑处理，这时候可以使用 provide 和 inject 来实现。
下面是一个简单的例子，我们在子组件中触发了一个 change 事件，在父组件中监听这个事件，并传递了一个参数：
// 子组件
Vue.component('child-component', {
methods: {
handleChange() {
this.$emit('change', 'Hello World');
}
},
template: `
<div>
<button @click="handleChange()">Click Me!</button>
</div>
`
});
// 父组件
Vue.component('parent-component', {
provide() {
return {
handleChange: this.handleChange
};
},
methods: {
handleChange(msg) {
alert(msg);
}
},
template: `
<div>
<child-component></child-component>
</div>
`
});
可以看到，在子组件中，我们触发了一个 change 事件，并传递了一个参数 "Hello World"。在父组件中，我们通过 provide 注入了一个 handleChange 方法，并监听了子组件的 change 事件。当子组件触发了 change 事件时，父组件会调用 handleChange 方法来处理相关业务逻辑，同时获取到传递的参数。
三、注意事项
在使用 provide 和 inject 的时候，需要注意一些细节问题，避免出现意外的错误。下面我们来介绍一些常见的注意事项：
1. provide 和 inject 只在当前组件及其后代组件中可用
需要注意的是，provide 和 inject 只在当前组件及其后代组件中可用，而不是整个组件树。这是因为 provide 和 inject 是基于组件实例的，只有通过组件实例的链条进行传递。
2. 挂载顺序的影响
在使用 provide 和 inject 时，需要注意挂载的顺序，父组件必须在子组件之前挂载，否则会导致 provide 注入到子组件中失败。
3. 动态 provide 会影响子组件的更新
在使用动态 provide 时，需要注意它会影响子组件的更新。如果 provide 中的属性发生了变化，但是没有触发子组件重新渲染，那么子组件中就无法获取到最新的值。这时候，我们可以使用 watch 来监听 provide 中的变化，并手动触发子组件的更新。
四、总结
在 Vue 组件中，通过 provide 和 inject 可以实现跨组件传递数据、方法和事件。使用这种方式，可以让组件之间的通信更加简便和高效，减少了大量的代码量。但是在使用过程中，也需要注意一些细节问题，避免出现错误。