The ancestor component provides the data

  provide(){
    user:"json"
  }
  // If you need to access the instance of the component, you need to switch to the return object mode
  provide(){
    return{
      todolength:this.todo.length
    }
  }
Copy the code

Child components inject data

  inject:["user"."todolength"]
Copy the code

Pay attention to

Provide/Inject binding is not reactive. We can change this behavior by passing a Ref property or Reactive object to provide. In our example, if we want to respond to changes in the ancestor component, we need to assign a combined API computed Property to the Provide todoLength:


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: The ${this.todoLength.value}`) // > Injected property: 5}})Copy the code