Proporcionar, inyectar también es una forma de comunicación de componentes, es una forma de que el componente principal se comunique con otros componentes secundarios y nietos.
Componente principal, father.vue
<template>
<div>
<children />
</div>
</template>
<script>
import children from './children/children'
export default {
data() {
return {
aa: "ss",
};
},
components:{
children
},
provide(){
return {
father:this
}
},
methods: {
log(){
console.log('哈哈')
}
},
};
</script>
Subconjunto
<template>
<div @click="dianji()">
{
{name}}
<grandSon />
</div>
</template>
<script>
import grandSon from './grandchild/grandchild'
export default {
inject:['father'],
components:{
grandSon
},
computed:{
name(){
return this.father.aa
}
},
methods: {
dianji(){
this.father.log()
}
},
}
</script>
Componente solar
<template>
<div class="grandchild">
<ul @click="dianji">
<li>{
{name}}</li>
</ul>
</div>
</template>
<script>
export default {
inject:['father'],
computed:{
name(){
return this.father.aa
}
},
methods: {
dianji(){
this.father.log()
}
},
}
</script>
Tanto los componentes secundarios como los componentes nietos pueden obtener y utilizar los datos y métodos del componente padre