I believe you must have encountered in the work of multi-layer nested components, and vUE component data communication and there are many ways.
Examples include vuex, $parent and $Children, Prop, $EMIT and $ON, $ATTRs and $LISenters, eventBus and REF.
Today, we will share provide and inject.
A lot of people ask, shouldn’t I just use Vuex?
Vuex is great!
However, it is possible that the project itself does not need to use VuEX, and provide and inject come into play
The official explanation
provide
Options should be an object or a function that returns an object. This object contains properties that can be injected into its descendants.
inject
It can be an array of strings or an object
Provide is injected into ancestor components, inject is injected where needed.
We can think of dependency injection as part of a broader prop with the following characteristics:
-
The ancestor component does not need to know which descendant components use the properties it provides
-
Descendant components do not need to know where the injected property came from
Note: Provide and Inject binding are not responsive. This is intentional. However, if you pass in a listening object, the object’s property is still responsive.
The instance
The directory structure
The ancestors
index.vue
<template>
<div class="grandPa"> Grandpa level: <strong>{{nameobj.name}} this year < I class="blue">{{age}}</ I > age, city < I class="yellow">{{ city }}</i></strong>
<child />
<br>
<br>
<el-button type="primary" plain @click="changeName"</el-button> </div> </template> <script> import child from'@/components/ProvideText/parent'
export default {
name: 'ProvideGrandPa',
components: { child },
data: function() {
return {
nameObj: {
name: 'small cloth'
},
age: 12,
city: 'Beijing'}},provide() {
returnNameObj: this.nameObj, // Pass a listener cityFn: () => this.city, // Use computed values to inject values age: this.age // Pass values directly}}, methods: {nameObj: this.nameObj, // Pass a listener cityFn: () => this.city, // Use computed values to inject values age: this.age // Pass values directly}}, methods: {changeName() {
if (this.nameObj.name === 'small cloth') {
this.nameObj.name = 'the sable cicada'
this.city = 'Hong Kong'
this.age = 24
} else {
this.nameObj.name = 'small cloth'
this.city = 'Beijing'
this.age = 12
}
}
}
}
</script>
<style lang="scss" scoped>
.grandPa{
width: 600px;
height:100px;
line-height: 100px;
border: 2px solid #7fffd4;
padding:0 10px;
text-align: center;
margin:50px auto;
strong{
font-size: 20px;
text-decoration: underline;;
}
.blue{
color: blue;
}
}
</style>
Copy the code
Intermediate component
parent.vue
<template>
<div class="parent"</strong> <son /> </div> </template> <script> import son from'./son'
export default {
name: 'ProvideParent',
components: { Son }
}
</script>
<style lang="scss" scoped>
.parent{
height:100px;
line-height: 100px;
border: 2px solid #feafef;
padding:0 10px;
margin-top: 20px;
strong{
font-size: 20px;
text-decoration: underline;;
}
}
</style>
Copy the code
Descendants of the component
son.vue
<template>
<div class="son"> Grandson level: <strong>{{nameobj. name}} This year < I class="blue">{{age}}</ I > age, city < I class="yellow">{{ city }}</i></strong>
</div>
</template>
<script>
export default {
name: 'ProvideSon', //inject to obtain the value inject: ['nameObj'.'age'.'cityFn'],
computed: {
city() {
return this.cityFn()
}
}
}
</script>
<style lang="scss" scoped>
.son{
height:100px;
line-height: 100px;
padding:0 10px;
margin: 20px;
border: 1px solid #49e2af;
strong{
font-size: 20px;
text-decoration: underline;;
}
.blue{
color: blue;
}
}
</style>
Copy the code
Let’s take a look at the results.
Figure 1: Original state without clicking the “Change Name” button
Figure 2: The “Change Name” button has been clicked to update the status
You can see the difference before and after.
You’ll notice a little detail.
No matter how many times I click, the age field of the grandchild component is always 12 and it doesn’t change.
It is the provide and inject binding mentioned in the official website that are not responsive. This is intentional.
So when you use it, you have to be careful how you inject it, otherwise you might not be able to respond to the data.
I hope you found today’s post helpful