vue学习，使用provide/inject通信

提示：组件的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状态

三、参考文档

1、vue provide文档

总结

踩坑路漫漫长@~@