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