通常，当我们需要从父组件向子组件传递数据时，我们使用props。想象一下这样的结构：有一些深度嵌套的组件，而深层的子组件只需要父组件的部分内容。在这种情况下，如果仍然将prop沿着组件链逐级传递下去，可能会很麻烦。对于这种情况，我们可以使用一对provide和inject。无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分：

父组件有一个provide选项来提供数据
子组件有一个inject选项来开始使用这些数据例如，我们有这样的层次结构：

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

如果要将todo-items的长度直接传递给TodoListStatistics，我们要将prop逐级传递下去：TodoList->TodoListFooter->TodoListStatistics。而通过provide/inject方法，我们可以直接执行以下操作：

app.component('todo-list', {
  provide: {
    user: 'John Doe'
  })

app.component('todo-list-statistics', {
  inject: ['user']
  })

但是，如果我们尝试在此处provide一些组件的实例property，这将是不起作用的：

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

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

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

这使我们能够更安全地继续开发该组件，而不必担心可能会更改/删除子组件所依赖的某些内容，这些组件之间的接口仍然是明确定义的，就像prop一样。实际上，我们可以将依赖注入看作是"long range props"，除了：

父组件不需要知道哪些子组件使用它provide的property
子组件不需要知道inject的property来自哪里

1.处理响应性

在上面的例子中，如果我们更改了todos的列表，这个变化并不会反映在inject的todoLength property中，这是因为默认情况下，provide/inject绑定并不是响应式的。我们可以通过传递一个ref property或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}`)
  }
})

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

Provide/Inject

1.处理响应性