HarmonyOS鸿蒙Next中【快应用】props属性传值undefined时无法获取默认值

HarmonyOS鸿蒙Next中【快应用】props属性传值undefined时无法获取默认值 【现象描述】

子组件的props定义属性和默认值，当父组件引用子组件，属性传值undefined时出错。

问题代码如下。

页面hello.ux代码：

<import name="t-item" src="./t-item.ux"></import><template><div class="" style="width: 100%"><list style="flex-direction: row;"><list-item type="test" class="" for="{{list}}"><t-item class="t-item" item="{{$item}}" width="{{undefined}}" height="{{undefined}}"></t-item></list-item></list></div></template>
<script>
export default {
  name: '',
  data() {
    return {
      list: [{
        image: 'https://communityfile-drcn.op.hicloud.com/FileServer/getFile/cmtyPub/011/111/111/0000000000011111111.20210630171132.81169860478879908890618042853305:50531229090011:2800:475BAB5A844AF8D249275599DD934CEDB950D2C4E3DBED8D769783BAA4D82BB4.jpg?needInitFileName=true?needInitFileName=true',
        name: 'HDR MODE'
      }, {
        image: 'https://communityfile-drcn.op.hicloud.com/FileServer/getFile/cmtyPub/011/111/111/0000000000011111111.20191017101406.43002136489534577410716813748735:50531229090011:2800:62F0779EA12370B9DC53B98521A6DC9FF760B266C389A529A7BD515EFF31B249.png?needInitFileName=true?needInitFileName=true?needInitFileName=true?needInitFileName=true',
        name: 'Night Mode'
      }],
    };
  },
  async onInit() {},
};
</script>
<style lang="less">
</style>

子组件t-item.ux代码：

<template>
  <div class="col" style="width: {{width}}px">
    <div class="size" style="height: {{height}}px">
      <image class="image" src="{{item.image}}" />
    </div>
    <div class="name">
      <text style="lines: 2">{{ item.name }}</text>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  props: {
    item: {
      type: Object,
      required: true,
    },
    width: {
      type: Number | String,
      default: 298,
    },
    height: {
      type: Number | String,
      default: 325,
    },
  },
  onInit() {
    console.log("this.width:" + this.width);
    console.log("this.height:" + this.height);
  },
}
</script>
<style lang="less">
.image {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: fill;
}
.name {
  margin-top: 10px;
}
.col {
  flex-direction: column;
}
</style>

【问题分析】

分析如下日志，华为快应用引擎把props传的值“undefined”当做正常的赋值，因此传给图片的宽高不是正确的值，是“undefinedpx”，导致图片无法显示。

08-26 17:14:03.557 I/jsLog (20859): this.width:undefined

08-26 17:14:03.557 I/jsLog (20859): this.height:undefined

【解决方法】

如果希望子组件props属性取值为默认值，父组件中可直接不传值，无需进行其他处理，修改代码如下：

<import name="t-item" src="./t-item.ux"></import><template><div class="" style="width: 100%"><list style="flex-direction: row;"><list-item type="test" class="" for="{{list}}"><t-item class="t-item" item="{{$item}}"></t-item></list-item></list></div></template>