当前位置：GHOST系统之家>系统教程 > Props自定义属性—学习笔记-props属性

Props自定义属性—学习笔记-props属性

来源：Ghost系统之家浏览：时间：2023-04-13 07:31:43

Props自定义属性—学习笔记

作者：木棉花潘颖琳 2022-09-21 14:42:03系统 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: '默认值',},},}

自定义组件通过element引入到宿主页面。代码中的name属性指自定义组件名称(非必填)，组件名称对大小写不敏感，默认使用小写。src属性指自定义组件hml文件路径(必填)，若没有设置name属性，则默认使用hml文件名作为组件名。

数据单向性:父子组件之间数据的传递是单向的，只能从父组件传递给子组件，并且子组件不能直接修改父组件传递下来的值，但是可以将props传入的值用data接收后作为默认值，再对data的值进行修改。

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

子组件的值:{{sonCount}}

//comp2.jsexport default {props:{sonCount:{default:0}},childClick(){this.sonCount+=1}}

父组件的值:{{fatherCount}}

//danxiang.jsexport default {data: {fatherCount:5},onClick(){this.fatherCount+=2}}

$watch 感知数据改变：

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

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

// comp1.jsexport default {props: {compProp: {default: '默认',},},onInit() {//添加对属性变化的监听，监听绑定的函数为自定义的onPropertyChangethis.$watch('compProp', 'onPropertyChange');},//定义一个监听属性变化的函数回调onPropertyChange(newV, oldV) {console.info('compProp 属性变化，新值为：' + newV + '，旧值为：' + oldV);}}

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.jsexport 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自定义属性——学习笔记-开源基础软件社区