Props自定义属性—学习笔记

系统 OpenHarmony
本文主要内容是关于JS自定义组件中的Props属性。

​想了解更多关于开源的内容,请访问:​

​51CTO 开源基础软件社区​

​https://ost.51cto.com​

前言

新的学期又开始啦!这学期笔者继续学习鸿蒙开发的相关课程,同时也记录一下自己的学习笔记,养成良好习惯❀❀好好学习,天天向上!!

概述

本文主要内容是关于JS自定义组件中的Props属性。

正文

自定义组件可以通过props声明属性,父组件通过设置属性向子组件传递参数。 props支持类型包括:String,Number,Boolean,Array,Object,Function。

  • ​命名使用:prop名采用camelCase (驼峰命名法)形式,在外部父组件传递参数时需要使用 kebab-case (短横线分隔命名) 形式,比如自定义的属性名称为compProp,在父组件引用时需要转换为comp-prop。(驼峰命名法理解:第一个单词以小写字母开始;从第二个单词开始以后的每个单词的首字母都采用大写字母,每一个逻辑断点有一个大写字母来标记)
  • 添加默认值:子组件可以通过固定值default设置默认值,当父组件没有设置该属性时,将使用其默认值。此情况下props属性必须为对象形式,不能用数组形式。
// comp1.js 
export default {
//仅设置属性不添加默认值时可用数组形式 props: ['compProp'],
//设置默认值时用对象形式
props: {
"compProp": {
default: '默认值',
},
},
}
<!-- comp1.hml -->
<div class="container">
<text class="title">
{{compProp}}
</text>
</div>
  • 自定义组件通过element引入到宿主页面。代码中的name属性指自定义组件名称(非必填),组件名称对大小写不敏感,默认使用小写。src属性指自定义组件hml文件路径(必填),若没有设置name属性,则默认使用hml文件名作为组件名。
<!-- index.hml -->
<element name="mycomp" src="../../comps/comp1/comp1.hml"></element>
<div class="container">
<mycomp comp-prop="子组件"></mycomp>
</div>
  • 数据单向性:父子组件之间数据的传递是单向的,只能从父组件传递给子组件,并且子组件不能直接修改父组件传递下来的值,但是可以将props传入的值用data接收后作为默认值,再对data的值进行修改。

【木棉花】:Props自定义属性——学习笔记-开源基础软件社区

<!-- comp2.hml -->
<div class="container">
<text class="title" onclick="childClick">
子组件的值:{{sonCount}}
</text>
</div>
//comp2.js
export default {
props:{
sonCount:{
default:0
}
},
childClick(){
this.sonCount+=1
}
}
<!-- danxiang.hml -->
<element name="comp2" src="../../comps/comp2/comp2.hml"></element>
<div class="container">
<comp2 son-count="{{fatherCount}}"></comp2>
<text onclick="onClick" class="title">
父组件的值:{{fatherCount}}
</text>
</div>
//danxiang.js
export default {
data: {
fatherCount:5
},
onClick(){
this.fatherCount+=2
}
}

$watch 感知数据改变:

如果需要观察组件中属性变化,可以通过$watch方法增加属性变化回调。可以观察data和props中定义的属性。

【木棉花】:Props自定义属性——学习笔记-开源基础软件社区

// comp1.js
export default {
props: {
compProp: {
default: '默认',
},
},
onInit() {
//添加对属性变化的监听,监听绑定的函数为自定义的onPropertyChange
this.$watch('compProp', 'onPropertyChange');
},
//定义一个监听属性变化的函数回调
onPropertyChange(newV, oldV) {
console.info('compProp 属性变化,新值为:' + newV + ',旧值为:' + oldV);
}
}
<!-- index.hml -->
<element name="mycomp" src="../../comps/comp1/comp1.hml"></element>
<div class="container">
<!-- 给自定义属性绑定数据,通过修改绑定的数据触发属性变化的监听-->
<mycomp comp-prop="{{title}}"></mycomp>
<button onclick="change" style="height: 100;width: 30%;font-size: 30fp;">按钮</button>
</div>
export default {
data: {
title: "子组件"
},
//改变子组件自定义属性绑定的数据,从而触发对属性变化的监听
change(){
this.title = "鸿蒙";
}
}

computed 计算属性:

自定义组件中在读取或设置某个属性时进行预先处理时,就需要使用computed字段。computed字段中可通过设置属性的getter和setter方法在属性读写的时候进行触发。

在computed字段中定义一些函数,这些函数就叫做“计算属性”。定义的时候虽然是函数样式,但是在引用“计算属性”的时候不要加(),就当作普通属性引用即可。

computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行数据绑定展示出结果或者用作其他处理。

//index.js
data: {
title: "子组件",
xing:"1",
ming:"2"
},
computed: {
name: {
get() {
return this.xing+this.ming;
},
set(){
console.info("set name"+this.name)
}
},
},
onclick1(){
this.xing="李"
},
onclick2(){
this.ming="华"
},
onclick3(){
this.name="abcd"
}
// comp1.js
export default {
data() {
return {
objProp: this.compProp,
time: 'Today',
};
},
props: {
compProp: {
default: '默认',
},
},
computed: {
message() {
return this.time + ' ' + this.objProp;
},
notice: {
get() {
return this.time;
},
set(newValue) {
this.time = newValue;
},
},
},
onClick() {
console.info('get click event ' + this.message);
this.notice = 'Tomorrow';
},
}

【木棉花】:Props自定义属性——学习笔记-开源基础软件社区

文章相关附件可以点击下面的原文链接前往下载:

https://ost.51cto.com/resource/2295。

​想了解更多关于开源的内容,请访问:​

​51CTO 开源基础软件社区​

​https://ost.51cto.com​​。

责任编辑:jianghua 来源: 51CTO开源基础软件社区
相关推荐

2022-08-29 10:01:59

2020-03-27 08:43:20

Vueprops开发

2011-03-08 15:01:08

Proftpd

2020-09-14 10:16:45

React

2021-09-01 18:42:57

2009-07-08 17:48:18

prototype属性

2019-11-11 14:51:19

Java数据结构Properties

2016-09-18 21:14:54

JavascriptPromiseWeb

2020-11-27 08:02:41

Promise

2016-09-18 16:58:09

JavaProperties

2011-02-25 11:29:33

ProFTP参数
点赞
收藏

51CTO技术栈公众号