成都网站建设app开发,商城网站 报价 方案,安徽网站优化公司价格,做ui设计用什么素材网站提示#xff1a;组件的provide#xff0c;可以被其内所有层级的组件#xff0c;通过inject引用 文章目录 前言一、通信组件二、效果三、参考文档总结 前言 需求#xff1a;使用provide/inject通信 一、通信组件
1、AA.vue
templatediv classtest… 提示组件的provide可以被其内所有层级的组件通过inject引用 文章目录 前言一、通信组件二、效果三、参考文档总结 前言 需求使用provide/inject通信 一、通信组件
1、AA.vue
templatediv classtestp1级 provid/ppBB //p/div
/templatescript
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级)}
}
/script2、BB.vue
templatediv classtestp2级 inject {{ title }}/ppCC //p/div
/templatescript
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
templatediv classtestp3级 inject {{ title }}/ppDD//p/div
/templatescript
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
templatediv classtestp4级 inject {{ title }}/p/div
/templatescript
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文档
总结
踩坑路漫漫长~
