Vue Provide / Inject 祖孙组件传值

祖先组件提供数据

  provide(){
    user:"json"
  }
  //如果需要访问组建的实例，需要转换为返回对象的方式
  provide(){
    return{
      todolength:this.todo.length
    }
  }

子组件注入数据

  inject:["user","todolength"]

注意

provide/inject 绑定并不是响应式的。我们可以通过传递一个 ref property 或 reactive 对象给 provide 来改变这种行为。在我们的例子中，如果我们想对祖先组件中的更改做出响应，我们需要为 provide 的 todoLength 分配一个组合式 API computed property：

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

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