1. Provide/inject instructions
Provide and inject are used to realize communication between components. Arbitrary communication between parent-child/grandchild components. A dependency is injected through provide in the ancestor component, and no matter how deep the component hierarchy is, the data of provide can be accessed through inject.
2. Provide/inject specific usage:
Three components: Home component - Provide component - Sun component (the bottom layer)
in the provide component:
data() {
return {
msg: 'Home组件的msg'
}
},
components: {
LeftTop, LeftCenter, ProvideC},
provide() {
return {
grandpaMsg: this.msg
}
},
In the sun component:
<template>
<div class="Sun">
sun组件
{
{
grandpaMsg }}
</div>
</template>
<script>
export default {
data() {
return {
}
},
inject: ['grandpaMsg']
}
</script>
At this time, the value of grandpaMsg will be displayed on the page, but the execution order in vue is
data -> provide -> created -> mounted
If the value of msg is changed in the mounted life cycle function in the Home component
mounted() {
this.msg = 'Home组件中msg的值被改变啦'
}
The page is still the value of the previous msg.
The data passed by this method is not responsive. When you change the msg in the parent component, the grandpaMsg received in the child component will not change. .
Official explanation: provide and inject bindings are not responsive. This is deliberate. However, if you pass in a listenable object, the object's property is still responsive.
3. Provide/inject implements responsiveness
Method 1: The passed parameters are returned by a method
parent component:
provide() {
return {
grandpaMsg: () => {
return this.msg
}
}
},
Subassembly:
<template>
<div class="Sun">
sun组件
{
{
grandpaMsg() }}
</div>
</template>
<script>
export default {
data() {
return {
}
},
components: {
},
inject: ['grandpaMsg'],
mounted() {
}
}
Method 2: Define the parameters that need to be passed as an object
parent component:
data() {
return {
obj: {
msg: 'Home组件的msg'
}
}
},
components: {
LeftTop, LeftCenter, ProvideC},
provide() {
return {
grandpaMsg: this.obj
}
},
mounted() {
this.obj.msg = 'Home组件中msg的值被改变啦'
}
Subassembly:
inject: ['grandpaMsg'],
use:
<div class="Sun">
sun组件
{
{
grandpaMsg.msg }}
</div>
This implements Provide/Inject responsive data.