通常,当我们需要从父组件向子组件传递数据时,我们使用 props。想象一下这样的结构:有一些深度嵌套的组件,而深层的子组件只需要父组件的部分内容。在这种情况下,如果仍然将 prop 沿着组件链逐级传递下去,可能会很麻烦。

基本使用

对于这种情况,我们可以使用一对 provide 和 inject。无论组件层次结构有多深,父组件都可以作为其所有后代组件的依赖提供者。这个特性有两个部分:父组件有一个 provide 选项来提供数据,后代组件有一个 inject 选项来开始使用这些数据。

  1. const app = Vue.createApp({})
  2. app.component('todo-list', {
  3. data() {
  4. return {
  5. todos: ['Feed a cat', 'Buy tickets']
  6. }
  7. },
  8. provide: {
  9. user: 'John Doe'
  10. },
  11. template: `
  12. <div>
  13. {{ todos.length }}
  14. <!-- 模板的其余部分 -->
  15. </div>
  16. `
  17. })
  18. app.component('todo-list-statistics', {
  19. inject: ['user'],
  20. created() {
  21. console.log(`Injected property: ${this.user}`) // > 注入 property: John Doe
  22. }
  23. })

provide 组件的实例 property

如果我们直接在此处 provide 一些组件的实例 property,这将是不起作用的:

  1. app.component('todo-list', {
  2. data() {
  3. return {
  4. todos: ['Feed a cat', 'Buy tickets']
  5. }
  6. },
  7. provide: {
  8. todoLength: this.todos.length // 将会导致错误 `Cannot read property 'length' of undefined`
  9. },
  10. template: `
  11. ...
  12. `
  13. })

要访问组件实例 property,我们需要将 provide 转换为返回对象的函数

  1. app.component('todo-list', {
  2. data() {
  3. return {
  4. todos: ['Feed a cat', 'Buy tickets']
  5. }
  6. },
  7. provide() {
  8. return {
  9. todoLength: this.todos.length
  10. }
  11. },
  12. template: `
  13. ...
  14. `
  15. })

处理响应式

在上面的例子中,如果我们更改了 todos 的列表,这个变化并不会反映在 inject 的 todoLength property 中。这是因为默认情况下,provide/inject 绑定并不是响应式的。我们可以通过传递一个 ref property 或 reactive 对象给 provide 来改变这种行为。在我们的例子中,如果我们想对祖先组件中的更改做出响应,我们需要为 provide 的 todoLength 分配一个组合式 API computed property:

  1. app.component('todo-list', {
  2. // ...
  3. provide() {
  4. return {
  5. todoLength: Vue.computed(() => this.todos.length)
  6. }
  7. }
  8. })
  9. app.component('todo-list-statistics', {
  10. inject: ['todoLength'],
  11. created() {
  12. console.log(`Injected property: ${this.todoLength.value}`) // > Injected property: 5
  13. }
  14. })