做最好的在线中文绅士本子阅读网站6,网站界面设计图片,陕西省西安市制作网站,二级子域名ip一、作用
Prop 装饰器 和Link装饰器都是父组件向子组件传递参数#xff0c;子组件接收父组件参数的时候用的#xff0c;变量前边需要加上Prop或者Link装饰器即可。#xff08;跟前端vue中父组件向子组件传递参数类似#xff09;
// 子组件
Component
struct SonCom {Prop…一、作用
Prop 装饰器 和Link装饰器都是父组件向子组件传递参数子组件接收父组件参数的时候用的变量前边需要加上Prop或者Link装饰器即可。跟前端vue中父组件向子组件传递参数类似
// 子组件
Component
struct SonCom {Prop name: stringbuild() {// ···}
}
// 子组件
Component
struct SonCom {Link name: stringbuild() {// ···}
}
二、区别
Prop 单向数据同步也就是只能父组件向子组件传递子组件值改变了不会影响到父组件中的值类似前端vue中的props。
Link双向数据同步既可以父组件向子组件传递值子组件也可以向父组件传递值。类似前端vue中的v-model估计设计的时候参考了
1演示Prop 子组件中的输入框值是由父组件传进去的当点击父组件按钮子组件输入框值发生改变但是如果在子组件输入框中直接输入子组件中的值虽然改变了但是父组件userName不会发生变化。
// 子组件
Component
struct SonCom {Prop name: stringbuild() {Row() {TextInput({text: this.name, placeholder: 请输入}).width(280).padding(10).onChange(val {this.name valconsole.log(当前输入框的值: ${val})})}}
}
// 父组件
Entry
Component
struct FatherCom {State userName: string build() {Column({space: 10}) {Text(子组件)Row() {SonCom({name: this.userName})}Divider()Text(父组件)Row() {Button(改变子组件输入框的值).onClick(e {this.userName 派大星})}Row() {Text(在父组件中userName的值${this.userName}).fontSize(16).fontWeight(FontWeight.Bold)}}.margin(20)}
}页面如下 点击父组件按钮此时子组件输入框值发生改变
但是直接在子组件输入框中直接输入父组件userName没发生变化
2演示Link 只把子组件Prop换成Link了
// 子组件
Component
struct SonCom {Link name: stringbuild() {Row() {TextInput({text: this.name, placeholder: 请输入}).width(280).padding(10).onChange(val {this.name valconsole.log(当前输入框的值: ${val})})}}
}
在子组件输入框中输入值父组件的userName也会跟着改变
注Link装饰的变量类型也可以时数组、对象复杂的数据类型对数组的新增、替换、删除元素都可以监听到当然对象的赋值啥的也能监听到具体可查看文档。
Link装饰器
