中国风 网站模板,wordpress 添加广告插件吗,上传视频网站源码,做网站制作要多少费用系列文章目录
【鸿蒙】HarmonyOS NEXT开发快速入门教程之ArkTS语法装饰器#xff08;上#xff09; 【鸿蒙】HarmonyOS NEXT开发快速入门教程之ArkTS语法装饰器#xff08;下#xff09; 【鸿蒙】HarmonyOS NEXT应用开发快速入门教程之布局篇#xff08;上#xff09; 【…系列文章目录
【鸿蒙】HarmonyOS NEXT开发快速入门教程之ArkTS语法装饰器上 【鸿蒙】HarmonyOS NEXT开发快速入门教程之ArkTS语法装饰器下 【鸿蒙】HarmonyOS NEXT应用开发快速入门教程之布局篇上 【鸿蒙】HarmonyOS NEXT应用开发快速入门教程之布局篇下 HarmonyOS Next 系列之省市区弹窗选择器实现一 HarmonyOS Next 系列之验证码输入组件实现二 HarmonyOS Next 系列之底部标签栏TabBar实现三 HarmonyOS Next 系列之HTTP请求封装和Token持久化存储四 HarmonyOS Next 系列之从手机选择图片或拍照上传功能实现五 HarmonyOS Next 系列之可移动悬浮按钮实现六 HarmonyOS Next 系列之沉浸式状态实现的多种方式七 HarmonyOS Next系列之Echarts图表组件折线图、柱状图、饼图等)实现八 HarmonyOS Next系列之地图组件Map Kit使用九 HarmonyOS Next系列之半圆环进度条实现十 HarmonyOS Next 系列之列表下拉刷新和触底加载更多数据实现十一 HarmonyOS Next系列之实现一个左右露出中间大两边小带缩放动画的轮播图十二 HarmonyOS Next系列之水波纹动画特效实现十三 文章目录 系列文章目录前言一、父子组件参数传递1、父传子方法一Prop方法二Link方法三普通变量三种方法区别示例1示例2 方法四ProvideConsume方法五LocalStorageProp或LocalStorageLink方法六StorageProp和StorageLink方法七eventHub方法八globalThis 2、子传父 二、爷孙组件参数传递方法一Provide和Consume方法二LocalStorageProp或LocalStorageLink方法三StorageProp和StorageLink方法四eventHub方法五globalThis 三、兄弟组件参数传递方法一Provide和Consume方法二Prop和事件回调函数方法三LocalStorageProp或LocalStorageLink方法四StorageProp和StorageLink方法五eventHub方法六globalThis 三、不同页面组件间数据传递方法一StorageProp和StorageLink方法二eventHub方法三globalThis 四、父组件调用子组件内部方法四、子组件调用父组件内部方法五、路由跳转和传参 前言
本文总结了鸿蒙中常用的组件或页面之间参数传递方法包括父子组件子孙组件兄弟组件互不相关的组件页面和页面路由跳转的参数传递以及父子组件方法互调等。 一、父子组件参数传递
1、父传子
方法一Prop
说明子组件定义Prop变量父组件通过对象形式传入数据
示例
Entry
/*** 父组件*/
Component
struct Parent {State title:string鸿蒙系统build() {Column() {Child({title:this.title})}.width(100%).height(100%)}
}/*** 子组件*/
Component
struct Child {Prop title:string;build() {Text(我是子组件标题${this.title})}
}运行效果 方法二Link
说明子组件定义Link变量父组件通过对象形式传入数据
Entry
/*** 父组件*/
Component
struct Parent {State title:string鸿蒙系统build() {Column() {Child({title:this.title})}.width(100%).height(100%)}
}/*** 子组件*/
Component
struct Child {Link title:string;build() {Button(this.title)}
}运行效果
方法三普通变量
说明子组件定义普通变量父组件通过对象形式传入数据
Entry
/*** 父组件*/
Component
struct Parent {State title:string普通变量build() {Column() {Child({title:this.title})}.width(100%).height(100%)}
}/*** 子组件*/
Component
struct Child {private title:string;build() {Text(我是${this.title})}
}运行结果
三种方法区别
1、Prop数据为单向传递只能从父组件传递到子组件无法从子组件回传到父组件。也就是子组件被Prop修饰的变量值改变后对应的父组件数据不变。 2、Link数据为双向绑定子组件被Link修饰的变量值改变对应的父组件的数据也跟着变化而且具有UI响应变化 3、普通变量只在子组件初始化时候能拿到父组件传递的数据后续如果父组件改变值子组件将无法获取到最新值
示例1
通过改变父组件值看看对应子组件数据变化情况
Entry
/*** 父组件*/
Component
struct Parent {State prop:stringprop方式State link:stringlink方式State common:string普通方式build() {Column({space:10}) {Child({prop:this.prop})Child2({link:this.link})Child3({common:this.common})Button(父组件改变值).onClick((){this.prop父组件改变后的propthis.link父组件改变后的linkthis.common父组件改变后的普通方式})}.width(100%).height(100%)}
}/*** 子组件*/
Component
struct Child {Prop prop:string;build() {Row(){Text(我是子组件prop变量值为:${this.prop}).fontColor(Color.Red)}}
}
/*** 子组件*/
Component
struct Child2 {Link link:string;build() {Row(){Text(我是子组件link变量值为:${this.link}).fontColor(Color.Red)}}
}
/*** 子组件*/
Component
struct Child3 {private common?:string;build() {Row(){Text(我是子组件普通变量值为:${this.common}).fontColor(Color.Red)}}
}运行效果 说明从运行结果可以看出普通变量方式只能在首次拿到数据后续无法响应UI变化而Prop和Link可以。
示例2
通过改变子组件值看看父组件数据变化情况
Entry
/*** 父组件*/
Component
struct Parent {State prop:stringprop方式State link:stringlink方式State common:string普通方式build() {Column({space:10}) {Text(父组件prop值为${this.prop})Text(父组件link值为${this.link})Text(父组件common值为${this.common})Child({prop:this.prop})Child2({link:this.link})Child3({common:this.common})}.width(100%).height(100%)}
}/*** 子组件*/
Component
struct Child {Prop prop:string;build() {Row(){Button(改变子组件prop值).onClick((){this.prop新prop})}}
}
/*** 子组件*/
Component
struct Child2 {Link link:string;build() {Row(){Button(改变子组件link值).onClick((){this.link新link})}}
}
/*** 子组件*/
Component
struct Child3 {private common?:string;build() {Row(){Button(改变子组件common值).onClick((){this.common新common})}}
}运行效果 说明从运行效果可以看出Link绑定的变量改变同时父组件数据跟着变另两个父组件数据不受影响。 方法四ProvideConsume
见下文介绍 方法五LocalStorageProp或LocalStorageLink
见下文介绍 方法六StorageProp和StorageLink
见下文介绍 方法七eventHub
见下文介绍 方法八globalThis
见下文介绍 2、子传父
子传父需求场景一般都是一些事件参数传递如点击事件回调等
方法父组件传递一个函数参数给子组件子组件调用函数并传入入参父组件就可以拿到该入参
示例
Entry/*** 父组件*/
Component
struct Parent {State name: string build() {Column({ space: 10 }) {Text(姓名是${this.name})Child({clickAction: (name) {this.name name}})}.width(100%).height(100%)}
}/*** 子组件*/
Component
struct Child {//回调函数private clickAction: (name: string) void () {}build() {Row() {Button(获取姓名).onClick(() {this.clickAction(小明)})}}
}
运行效果
二、爷孙组件参数传递
方法一Provide和Consume 说明Provide和Consume组合可以把参数往子孙层传递不单单支持爷孙组件之间支持跨层级多层级、不限层级传递。 并且数据是双向绑定的和Link一样改变孙子组件数据爷爷组件数据也会跟着变化 ps:所以Provide和Consume也支持父子组件参数传递但其更多用在跨层级组件之间数据传递父子组件优先使用上面介绍前三种。
示例
//父组件
Entry
Component
struct Parent {Provide(weight) weight: number 50build() {Column({ space: 20 }) {Text(爷组件体重值:${this.weight})Button(爷组件件体重1).onClick(() {this.weight})Child()}.padding(20).alignItems(HorizontalAlign.Start)}
}//子组件
Component
struct Child {build() {Grandson()}
}//孙组件
Component
struct Grandson {Consume(weight) weight: numberbuild() {Column({ space: 20 }) {Text(孙组件体重值:${this.weight})Button(孙组件体重1).onClick(() {this.weight})}.margin({ top: 50 })}
}
运行效果
方法二LocalStorageProp或LocalStorageLink
见下文介绍 方法三StorageProp和StorageLink
见下文介绍 方法四eventHub
见下文介绍 方法五globalThis
见下文介绍 三、兄弟组件参数传递
方法一Provide和Consume
利用Provide和Consume数据双向绑定特性以公共的父组件为中间媒介传递数据
示例代码
//父组件
Entry
Component
struct Index {//姓名Provide(name) name: string 张三build() {Column({ space: 20 }) {Child()Child2()}}
}//子组件1
Component
struct Child {Consume(name) name: stringbuild() {Column({ space: 20 }) {Text(姓名为${this.name})}}
}//子组件2
Component
struct Child2 {Consume(name) name: stringbuild() {Column({ space: 20 }) {Button(改变姓名).onClick((){this.name李四})}}
}
运行效果
方法二Prop和事件回调函数
利用父组件为中间媒介数据先从子组件1传递到父组件在从父组件传给组件2
示例
//父组件
Entry
Component
struct Index {//姓名State name: string 张三build() {Column({ space: 20 }) {Child({name:this.name})Child2({changeAction:(name:string){this.namename}})}}
}//子组件1
Component
struct Child {Prop name: stringbuild() {Column({ space: 20 }) {Text(姓名为${this.name})}}
}//子组件2
Component
struct Child2 {//回调函数private changeAction:(name:string)void(){}build() {Column({ space: 20 }) {Button(改变姓名).onClick((){this.changeAction(李四)})}}
}
运行效果和方法一Provide和Consume示例一样效果
方法三LocalStorageProp或LocalStorageLink LocalStorageProp和LocalStorageLink是页面级的UI状态存储页面内的所有组件共享一份存储数据 示例
let storage: LocalStorage new LocalStorage();
storage.setOrCreate(name,张三)//父组件
Entry(storage)
Component
struct Index {build() {Column({ space: 20 }) {Child()Child2()}}
}//子组件1
Component
struct Child {LocalStorageProp(name) name:string //姓名build() {Column({ space: 20 }) {Text(姓名为${this.name})}}
}//子组件2
Component
struct Child2 {LocalStorageLink(name) name:string //姓名build() {Column({ space: 20 }) {Button(改变姓名).onClick((){this.name李四})}}
}
运行效果和方法一Provide和Consume示例一样效果 方法四StorageProp和StorageLink
见下文介绍 方法五eventHub
见下文介绍 方法六globalThis
见下文介绍 三、不同页面组件间数据传递
方法一StorageProp和StorageLink StorageProp和StorageLink是应用全局的UI状态存储与之对应的是全局静态类AppStorage。和进程绑定同一进程下的所有页面共用。 示例
第一个页面Index.ets
import { router } from kit.ArkUIAppStorage.setOrCreate(name,张三)
Entry
Component
struct Index {StorageProp(name) name:stringbuild() {Column({space:20}) {Text(姓名为${this.name})Button(跳转下一页).onClick((){router.pushUrl({url:pages/Second})})}.width(100%).height(100%).padding({top:30})}
}
第二个页面Second.ets
import { router } from kit.ArkUIEntry
Component
struct Second {StorageLink(name) name: string build() {Column({space:20}) {Text(当前姓名${this.name})Button(改变姓名值).onClick(() {this.name 李四})Button(返回).onClick((){router.back()})}.width(100%).height(100%).padding({top:30})}
}运行效果
方法二eventHub eventHub和vue中eventBus一样使用方法也类似安卓的广播机制通过emit发出事件广播并携带参数在有注册该事件on的页面会同步接收到该事件的回调 eventHub.emit()发出事件 eventHub.on()注册事件 eventHub.off()解绑事件
ps需要注意的是离开页面必须进行解绑不然再次打开会页面会造成多次注册导致同一个事件被多次触发回调
eventHub为Context上一个属性对象在页面内通过getContext().eventHub获取
示例 场景个人信息编辑成功后通知前面页面更新个人信息
第一个页面Index.ets
import { router } from kit.ArkUI//父组件
Entry
Component
struct Index {State name: string 张三;State age: number 25aboutToAppear(): void {//注册事件getContext().eventHub.on(userInfoChange, this.handleUserInfoChange.bind(this))}aboutToDisappear(): void {//解绑事件getContext().eventHub.off(userInfoChange, this.handleUserInfoChange.bind(this))}//用户信息修改成功回调private handleUserInfoChange(data: Recordstring, string) {this.name data.name ?? this.age data.age ? Number(data.age) : this.age}build() {Column({ space: 20 }) {Text(姓名${this.name})Text(年龄${this.age})Button(修改个人信息).onClick(() {router.pushUrl({url: pages/Editor})})}.width(100%).padding({ top: 20 })}
}
第二个页面Editor.ets
import { promptAction, router } from kit.ArkUIEntry
Component
struct Editor {State name:stringState age:stringbuild() {Column({space:15}) {TextInput({placeholder:请输入姓名,text:$$this.name})TextInput({placeholder:请输入年龄,text:$$this.age}).type(InputType.Number)Button(提交).onClick((){getContext().eventHub.emit(userInfoChange,{age:this.age,name:this.name})promptAction.showToast({message:修改成功})router.back()})}.width(100%).height(100%).justifyContent(FlexAlign.Center).padding(20)}
}ps:注意this的指向绑定回调函数需要用bind(this)
运行效果
eventHub在实际项目开发中非常实用可以很轻松实现任意不同页面或组件之间的通信。常用于一些需要刷新页面操作的场景除了上述例子外还可以应用于提交一个表单数据后通知前面页面刷新列表数据或者比如在支付完成后通知订单列表刷新订单状态等。
ps:注意预览器和真机的差异性对eventHub支持不友好所以如有使用eventHub功能要在真机或者模拟器测试
方法三globalThis globalThis是ArkTS引擎实例内部的一个全局对象引擎内部的UIAbility/ExtensionAbility/Page都可以使用简单说globalThis是一个全局对象变量所有页面都可以直接引用所以可以把数据存到globalThis属性上供其他页面使用 示例 以方法eventHub示例一样功能场景用globalThis实现
第一个页面Index.ets
import { router } from kit.ArkUI//父组件
Entry
Component
struct Index {State name: string State age: number 0build() {Column({ space: 20 }) {Text(姓名${this.name})Text(年龄${this.age})Button(修改个人信息).onClick(() {router.pushUrl({url: pages/Editor})})}.width(100%).padding({ top: 20 }).onVisibleAreaChange([0.0, 1.0], async (isVisible: boolean, currentRatio: number) {//页面重新加载从globalThis获取最新数据this.name globalThis.name ?? 张三this.age globalThis.age ?? 25})}
}
第二个页面Editor.ets
import { promptAction, router } from kit.ArkUIEntry
Component
struct Editor {build() {Column({space:15}) {TextInput({placeholder:请输入姓名}).onChange((value:string){//姓名数据存储到全局globalThisglobalThis.namevalue})TextInput({placeholder:请输入年龄}).type(InputType.Number).onChange((value:string){//年龄数据存储到全局globalThisglobalThis.agevalue})Button(提交).onClick((){promptAction.showToast({message:修改成功})router.back()})}.width(100%).height(100%).justifyContent(FlexAlign.Center).padding(20)}
}实现效果如方法2所示
需要注意的是globalThis全局变量数据非响应式如有更新需要在返回第一个页面从重新获取。 globalThis为全局变量为了避免变量污染尽可能优先使用其他方案替代。 四、父组件调用子组件内部方法
方法提炼子组件暴露一个回调方法把子组件实例通过入参回传给父组件父组件全局缓存子组件实例在需要的时候调用子组件实例上方法。
示例 下面实现一个这样场景需求页面重复倒计时5秒后刷新列表数据其中列表在子组件渲染刷新动作在父组件触发
import { SwipeRefresher } from kit.ArkUI;//父组件
Entry
Component
struct Parent {child: Child | null null; //子组件实例State count: number 5aboutToAppear(): void {setInterval(() {this.count--if (this.count 0) {//重新获取子组件数据this.child this.child.getData();this.count 5}}, 1000)}build() {Column({ space: 20 }) {Text(倒计时${this.count}秒)Child({complete: (child: Child) {this.child child}})}.width(100%)}
}//子组件
Component
struct Child {//初始化回调complete: (child: Child) void () {}State list: number[] []State isLoading: boolean falseaboutToAppear(): void {//把子组件实例回传给父组件this.complete(this)this.getData()}//模拟接口获取列表数据getData() {this.isLoading truelet list: number[] []for (let i 1; i 6; i) {list.push(this.getRandom())}this.list listsetTimeout(() {this.isLoading false}, 1000)}//获取随机数getRandom() {return Math.round(Math.random() * 10000)}build() {Column() {if (this.isLoading) {SwipeRefresher({content: 正在加载中,isLoading: this.isLoading})} else {List() {ForEach(this.list, (item: number, index: number) {ListItem() {Text(item.toString()).width(100%).height(80).textAlign(TextAlign.Center).border({width: {bottom: 1}})}.width(100%)}, (item: number, index: number) item.toString())}.width(100%)}}.width(100%).height(100%)}
}
运行效果
四、子组件调用父组件内部方法
方法提炼父组件实例当参数传递给子组件子组件缓存父组件实例在需要的时候调用实例上方法
示例 下面实现一个这样场景需求父组件有一个加载中组件对应有关闭和显示2个控制方法。子组件接口正在请求数据时显示加载中接口请求完毕后关闭加载中。
import { SwipeRefresher } from kit.ArkUI;//父组件
Entry
Component
struct Parent {State isLoading: boolean false//显示加载中showLoading() {this.isLoading true}//隐藏加载中hideLoading() {this.isLoading false}build() {Column({ space: 20 }) {if (this.isLoading) {SwipeRefresher({content: 正在加载中,isLoading: this.isLoading})}Child({parent: this})}.width(100%)}
}//子组件
Component
struct Child {parent: Parent | null nullbuild() {Column() {Button(加载数据).onClick(() {this.parent?.showLoading()//模拟接口请求2秒后关闭加载显示setTimeout(() {this.parent?.hideLoading()}, 2000)})}.width(100%).height(100%)}
}
运行效果
五、路由跳转和传参
1、通过 router.pushUrl options: RouterOptions实现路由跳转
RouterOptions类型属性字段 url:目标页面的url params路由跳转时要同时传递到目标页面的数据
import { router } from kit.ArkUI
......
.....
router.pushUrl({url:pages/Editor,params:{name:张三,}})2、通过router.getParams()获取路由参数
aboutToAppear(): void {//获取路由参数let params router.getParams() as Recordstring, string console.log( params[name] as string )}代码示例 由页面A跳转到页面B并携带姓名和年龄参数
页面A Index.ets
//父组件
import { router } from kit.ArkUIEntry
Component
struct Parent {build() {Column({ space: 20 }) {Button(跳转下一页).onClick((){router.pushUrl({url:pages/Editor,params:{name:张三,age:20}})})}.width(100%)}
}
页面B Editor.ets
import { router } from kit.ArkUIEntry
Component
struct Editor {State name: string //姓名State age: string //年龄aboutToAppear(): void {//获取路由参数let params router.getParams() as Recordstring, string | numberthis.name params[name] as string ?? this.age ( params[age] as number ?? 0).toString()}build() {Column({ space: 15 }) {TextInput({ placeholder: 请输入姓名, text: $$this.name })TextInput({ placeholder: 请输入年龄, text: $$this.age }).type(InputType.Number)}.width(100%).height(100%).justifyContent(FlexAlign.Center).padding(20)}
}运行效果
