当前位置: 首页>后端>正文

HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式

1、父传子:

HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式,HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式_ide,第1张

HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式,HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式_事件总线_02,第2张

2、子传父

HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式,HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式_ide_03,第3张

 

HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式,HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式_前端_04,第4张

3.兄弟组件通信 (bus:一个事件总线(公共汽车))

先添加一条事件总线,brother1组件通过事件总线传值给brother2组件

HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式,HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式_事件总线_05,第5张

 

HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式,HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式_vue.js_06,第6张

HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式,HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式_ide_07,第7张

  

HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式,HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式_ide_08,第8张

 4.vuex----状态管理工具:

(常用于保存数据,用于传值的情况比较少,用的最多的是父传子和子传父)

HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式,HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式_vscode_09,第9张

HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式,HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式_事件总线_10,第10张

 5.localStorage:本地存储     sessionStorage(也可以实现传值,用法同localStorage一样)

本地存储也可以实现传值,但是他不算传值的一种方式

HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式,HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式_ide_11,第11张

HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式,HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式_vscode_12,第12张

HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式,HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式_vue.js_13,第13张

HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式,HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式_vue.js_14,第14张

6、 provide 和 inject

(vue2不是响应式的,所以不建议使用,但是在vue3里面可以随意使用,因为vue3是响应式的,用起来极为简单,方便。)

        首先来谈谈我们为什么要使用provide/inject?对于爷爷和孙子组件之间,甚至太爷爷组件与孙子组件通信我们用vuex不就ok了。

        那事实的确如此,但是,请听我说但是,有时候你项目比较小甚至组件通信的场景很少的,那么你引入vuex就为了那么几个通信传参是不是很浪费啊。有人也可能会想到使用$parent获取父组件实例,来获取data/methods,这种两层就还好,那多层呢,组件嵌套很深的话,你怎么弄?写个函数把$parent再封装一下。那不是很麻烦吗,现成的你不用非要曲线救国。哈哈~扯远了。

接下来,让我们看一下它的一个写法:

provide在父组件里面用于传输
                
inject在子组件里面用于接收

两者不可反向注入

HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式,HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式_前端_15,第15张

HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式,HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式_事件总线_16,第16张

好啦!是不是很简单呢。其实就是不管是父组件还是祖先组件都可以向后代组件中注入依赖,无论组件的层次有多深,我们都可以拿到它

7、$parent   和    $children  的使用        (不是响应式的,不经常使用)

$parent:在父组件中可以获取所有子组件的实例

$children:在子组件中可以获取所有父组件的实例

 在父组件中,mounted()生命周期函数中,输出this,this里面有$children实例,大家想一下,我们将子组件的实例都拿到了,还拿不到它身上的数据吗?一定可以,好,看一下操作步骤:

HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式,HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式_ide_17,第17张

HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式,HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式_vue.js_18,第18张

HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式,HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式_vscode_19,第19张

 8、$attrs  可以获取当前子组件上所有的属性,可以代替props接收父组件传过来的数据

多用于多级组件嵌套传值:

HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式,HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式_事件总线_20,第20张

HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式,HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式_事件总线_21,第21张

HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式,HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式_前端_22,第22张

9、 ref:常用于操作底层DOM操作(使用场景:更改ref的属性值,这个时候用它)

HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式,HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式_vue.js_23,第23张

HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式,HarmonyOS 中组件间传递复杂数据类型 组件之间传值方式_前端_24,第24张


https://www.xamrdz.com/backend/3wt1962970.html

相关文章: