【木棉花】:Props自定义属性——学习笔记 原创 精华

木棉花潘颖琳
发布于 2022-9-17 20:25
浏览
1收藏

前言

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

概述

本文主要内容是关于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自定义属性——学习笔记-鸿蒙开发者社区

结语

以上就是本次的小分享啦!❀❀

更多资料请关注我们的项目 : Awesome-Harmony_木棉花

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
JSprops.rar 3.23K 14次下载
已于2022-9-17 20:25:55修改
3
收藏 1
回复
举报
1条回复
按时间正序
/
按时间倒序
红叶亦知秋
红叶亦知秋

学习自定义组件的必经之路,必须好好学习下

回复
2022-9-19 10:31:39
回复
    相关推荐