提示:组件的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文档文章来源:https://www.toymoban.com/news/detail-801063.html
总结
踩坑路漫漫长@~@文章来源地址https://www.toymoban.com/news/detail-801063.html
到了这里,关于vue学习,使用provide/inject通信的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!