Provide和Inject

阅读: 3555     评论:0

通常,当我们需要从父组件向子组件传递数据时,我们使用 props。

但是,想象一下这样的结构:有一些深度嵌套的组件,而深层的子组件只需要父组件的部分内容。在这种情况下,如果仍然将 prop 沿着组件链逐级传递下去,可能会很麻烦。

对于这种情况,我们可以使用一对 provideinject。无论组件层次结构有多深,父组件都可以作为其所有子组件的依赖提供者。

这个特性有两个部分:父组件有一个 provide 选项提供数据,子组件有一个 inject 选项使用这些数据。

Provide/inject scheme

例如,假设有这样的层次结构:

Root
└─ TodoList
   ├─ TodoItem
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

如果要将TodoList组件中user传递给 TodoListStatistics,我们通常要将 prop 逐级传递下去:TodoList -> TodoListFooter -> TodoListStatistics

但是通过 provide/inject 方法,我们可以直接执行以下操作:

const app = Vue.createApp({})

app.component('todo-list', {
  data() {
    return {
      todos: ['Feed a cat', 'Buy tickets']
    }
  },
  provide: {
    user: 'John Doe'
  },
  template: `
    <div>
      {{ todos.length }}
      <!-- 模板的其余部分 -->
    </div>
  `
})

app.component('todo-list-statistics', {
  inject: ['user'],
  created() {
    console.log(`Injected property: ${this.user}`) // > 注入 property: John Doe
  }
})

但是,如果我们尝试在此处 provide 一些组件的实例属性,这将是不起作用的:

app.component('todo-list', {
  data() {
    return {
      todos: ['Feed a cat', 'Buy tickets']
    }
  },
  provide: {
    todoLength: this.todos.length // 将会导致错误 `Cannot read property 'length' of undefined`
  },
  template: `
    ...
  `
})

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

app.component('todo-list', {
  data() {
    return {
      todos: ['Feed a cat', 'Buy tickets']
    }
  },
  provide() {
    return {
      todoLength: this.todos.length
    }
  },
  template: `
    ...
  `
})

这使我们能够更安全地继续开发该组件,而不必担心可能会更改/删除子组件所依赖的某些内容。这些组件之间的接口仍然是明确定义的,就像 prop 一样。

实际上,你可以将依赖注入看作是“long range props”,除了:

  • 父组件不需要知道哪些子组件使用它 provide 的小户型
  • 子组件不需要知道 inject 的属性来自哪里

处理响应性

在上面的例子中,如果我们更改了 todos 的列表,这个变化并不会反映在 inject 的 todoLength 属性中。这是因为默认情况下,provide/inject 绑定并不是响应式的

我们可以通过传递一个 ref 属性或 reactive 对象给 provide 来改变这种行为。

在我们的例子中,如果我们想对祖先组件中的更改做出响应,我们需要为 provide 的 todoLength 分配一个组合式 API computed property:

app.component('todo-list', {
  // ...
  provide() {
    return {
      todoLength: Vue.computed(() => this.todos.length)
    }
  }
})

app.component('todo-list-statistics', {
  inject: ['todoLength'],
  created() {
    console.log(`Injected property: ${this.todoLength.value}`) // > Injected property: 5
  }
})

在这种情况下,任何对 todos.length 的改变都会被正确地反映在注入 todoLength 的组件中。


 插槽slots 动态和异步组件 

评论总数: 0


点击登录后方可评论