current position：Home>Vue provide / inject grandson component value transfer

Vue provide / inject grandson component value transfer

2021-08-27 07:57:32 【Mr Tao】

The ancestor component provides data 

  provide(){
    user:"json"
  }
  // If you need to access the instance of the build , It needs to be converted to the way to return the object 
  provide(){
    return{
      todolength:this.todo.length
    }
  }
 Copy code

Sub component injection data 

  inject:["user","todolength"]
 Copy code

Be careful

provide/inject  binding Not at all Responsive . We can pass on a  ref property or  reactive  The object is to  provide  To change that behavior . In our case , If we want to respond to changes in the ancestor component , We need to provide Of  todoLength  Assign a combined 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
  }
})

 Copy code

copyright notice
author[Mr Tao],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827075730292w.html

The sidebar is recommended

guess what you like

Random recommended