提示：组件的provide，可以被其内所有层级的组件，通过inject引用
前言
需求：使用provide/inject通信
一、通信组件
1、AA.vue
<template>
<div class="test">
<p>1级 provid</p>
<p><BB /></p>
</div>
</template>
<script>
import BB from './BB'
export default {
name: 'AA',
components:{
BB},
data () {
return {
title:'---测试provid和inject通讯',
name:'张三'
}
},
provide(){
return {
title:this.title,
changeName(name){
this.name = name;
console.log(this.name)
},
}
},
created(){
console.log(this.name,'1级')
}
}
</script>
2、BB.vue
<template>
<div class="test">
<p>2级 inject {
{
title }}</p>
<p><CC /></p>
</div>
</template>
<script>
import CC from './CC'
export default {
name: 'BB',
components:{
CC},
inject:{
title:{
type:String,
default:''
},
changeName:{
type:Function,
default:function(name){
}
}
},
data () {
return {
}
},
created(){
this.changeName('李四')
}
}
</script>
3、CC.vue
<template>
<div class="test">
<p>3级 inject {
{
title }}</p>
<p><DD/></p>
</div>
</template>
<script>
import DD from './DD'
export default {
name: 'CC',
components:{
DD},
inject:{
title:{
type:String,
default:''
},
changeName:{
type:Function,
default:function(name){
}
}
},
data () {
return {
}
},
created(){
this.changeName('王五')
}
}
</script>
4、DD.vue
<template>
<div class="test">
<p>4级 inject {
{
title }}</p>
</div>
</template>
<script>
export default {
name: 'DD',
inject:{
title:{
type:String,
default:''
},
changeName:{
type:Function,
default:function(name){
}
}
},
data () {
return {
}
},
created(){
this.changeName('赵六')
}
}
</script>
二、效果
AA组件引用BB组件
BB组件引用CC组件
CC组件引用DD组件
BB、CC、DD都可以通过 inject 获取到AA的provide
provide与inject之间的通讯，既可以传输数据，也可以传输方法
在BB、CC、DD调用AA的方法修改AA的name
不能在inject的changeName方法里，直接修改provide的title
更新beforeCreate状态
初始化inject
初始化props、setup、methods、data、computed、watch
初始化provide
更新created状态
三、参考文档
总结
踩坑路漫漫长@~@
