当前位置: 首页 > 科技观察

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

时间:2023-03-12 12:23:08 科技观察

了解更多开源请访问:开源基础软件社区https://ost.51cto.com前言新学期来了让我们开始吧!本学期,笔者继续学习鸿蒙开发的相关课程。同时,我也记录自己的学习笔记,养成良好的习惯??好好学习,天天向上!!概述本文的主要内容是关于JS自定义组件中的Props属性。文本自定义组件可以通过props声明属性,父组件通过设置属性向子组件传递参数。支持的props类型包括:String、Number、Boolean、Array、Object、Function。命名用法:prop名称采用camelCase(驼峰命名法),在外部父组件中传递参数时需要kebab-case(破折号分隔命名)形式。比如自定义属性名是compProp,父组件引用需要转换成comp-prop。(驼峰式理解:第一个单词以小写字母开头;从第二个单词开始的每个单词的首字母使用大写字母,每个逻辑断点都用大写字母标示)添加默认值:子组件可以通过固定值default设置默认值。当父组件没有设置该属性时,将使用其默认值。在这种情况下,props属性必须是对象的形式,而不是数组。//comp1.jsexportdefault{//只设置属性不加默认值可以用数组形式props:['compProp'],//设置默认值时,使用对象形式props:{"compProp":{default:'默认值',},},{{compProp}}

自定义组件通过元素导入到宿主页面。代码中的name属性是指自定义组件名称(非必须)。组件名称不区分大小写,默认使用小写。src属性是指自定义组件的hml文件路径(必填)。如果不设置name属性,默认使用hml文件名作为组件名。
数据单向性:父子组件之间的数据传递是单向的,只能从父组件传递到子组件,子组件不能直接修改父组件组件传过来的值,但是props传入的值可以被data接收为默认值,然后可以修改data的值。子组件值:{{sonCount}}
//comp2.jsexportdefault{props:{sonCount:{default:0}},childClick(){this.sonCount+=1}}父组件取值:{{fatherCount}}
//danxiang.jsexportdefault{data:{fatherCount:5},onClick(){this.fatherCount+=2}}$watch感知数据变化:如果需要观察组件的属性变化,可以通过$watch方法添加属性变化回调。可以观察数据和道具中定义的属性。//comp1.jsexportdefault{props:{compProp:{default:'Default',},},onInit(){//添加属性变化监听,绑定函数为自定义的onPropertyChangethis.$watch('compProp','onPropertyChange');},//定义一个监听属性变化的函数callbackonPropertyChange(newV,oldV){console.info('compProp属性变化,新值:'+newV+',旧值为:'+oldV);}}buttonexportdefault{data:{title:"subcomponent"},//更改自定义属性绑定的数据子组件的监听,从而触发属性变化的监听change(){this.title="鸿蒙";}}computedproperty:当在自定义组件中读取或设置某个属性时,进行预处理时,需要使用computed字段。通过设置属性的getter和setter方法,可以在读取或写入属性时触发计算字段。在计算域中定义一些函数,这些函数称为“计算属性”。定义时虽然是函数式,但引用“计算属性”时不要加(),作为普通属性引用使用即可。Computed用于监控自己定义的变量。变量不在data中声明,直接在computed中定义,然后在页面上进行数据绑定即可显示结果或用于其他处理。//index.jsdata:{title:"子组件",xing:"1",ming:"2"},computed:{name:{get(){returnthis.xing+this.ming;},set(){console.info("setname"+this.name)}},},onclick1(){this.xing="李"},onclick2(){this.ming="华"},onclick3(){this.name="abcd"}//comp1.jsexportdefault{data(){return{objProp:this.compProp,time:'Today',};},props:{compProp:{default:'默认',},},computed:{message(){returnthis.time+''+this.objProp;},注意:{get(){returnthis.time;},set(newValue){this.time=newValue;},},},onClick(){console.info('获取点击事件'+this.message);this.notice='明天';},}可以点击下方链接下载文章相关附件:https://ost.51cto.com/resource/2295了解更多开源请访问:开源基础软件社区https://ost.51cto.com。