鸿蒙JS UI 组件通信总结及任意组件通信

时间：2023-03-19 15:35:35 科技观察

HarmonyJSUI组件通信和任意组件通信总结在组件之间传递数据或执行相关业务逻辑。对于鸿蒙应用组件，下面会实现几个组件间通信方法的代码实现，包括任意组件通信的自定义实现的实现。首先我们准备几个组件parent组件，current组件，child1组件，child2组件，其中parent和current是父子组件关系，curren和child1/child2是父子组件关系，child1和child2是兄弟组件关系，parentchild1/child2是跨层次组件的关系。common.css.title{font-size:20px;text-align:left;padding-bottom:5px;line-height:20px;}.div-button{flex-direction:row;}.div-button.button{margin:5px;}1.parent组parent.hmlparent-num:{{num}}parent-info-str:{{info.str}}

parent.jsexportdefault{data:{num:0,info:{str:'parentStr'}}}parent.css@import'../../../common/css/common.css';.container{display:flex;flex:1;flex-direction:column;width:100%;padding:10px;background-color:aqua;}2.current组件current.hmlcurrent-title:{{title}}current-num:{{num}}current-info-str:{{info.str}}

current.jsexportdefault{props:{title:{default:'current-title',}},data:{num:0,info:{str:'currentStr'}},//修改父组件的num和infochangeParent(){console.log('**start**********************');console.log('currenchangeparent');letparent=this.$parent();letnum=parent.num+1;parent.nu??m=num;letinfo={str:'currenchangeparent'};//current.info=info;parent.info.str='currenchangeparent';console.log('num:');console.log(num);console.log('info:');console.log(JSON.stringify(info));console.log('**end*************************');},//修改child1组的num和infochangeChild1(){console.log('**start**********************');console.log('currentchangechild1');letchild1=this.$child('child1');letnum=child1.num+1;child1.num=num;letinfo={str:'currentchangechild1'};child1.info=info;console.log('num:');console.log(num);console.log('info:');console.log(JSON.stringify(info));console.log('**end************************');},//修改child2组的num和infochangeChild2(){console.log('**开始************************');console.log('currenchangechild2');letchild2=this.$child('child2');letnum=child2.nu??m+1;child2.num=num;letinfo={str:'currenchangechild2'};child2.info=info;console.log('num:');console.log(num);console.log('info:');console.log(JSON.stringify(info));console.log('**end************************');}}current.css@import'../../../common/css/common.css';.container{display:flex;flex:1;flex-direction:column;width:100%;padding:10px;background-color:aquamarine;border:1pxsolid#333333;}3.child1组件child1.hmlchild1-num:{{num}}child1-info-str:{{info.str}}