uni-app 微信小程序中动态props不能使用kebab-case命名方式

示例代码：

父组件

<dh-picker-select  
 ref="selectRef"  
  title="选择"  
  :mask-click="false"  
  :show-cancel="false"  
  :data-list="entList"  
/>  
<script setup>  
 onMounted(() => {  
   setTimeout(() => {  
     entList.value = [{ code: 123, name: '123' }]  
   }, 1000)  
 })  
</script>

子组件

  watch(  
    () => props.dataList,  
    (curValue) => {  
      console.log('dataList');  
      console.log(curValue);  
    }  
  );

操作步骤：

打开父组件所在页面，隔了1s后，H5端打印了子组件watch中的内容，小程序没用打印。

预期结果：

小程序中，子组件中打印watch监听的内容

实际结果：

小程序中没用监听到dataList的变化。但是把:data-list改成:list是可以正常监听。所以不确定是否是小程序不支持这种写法还是什么原因导致的。

bug描述：

在父组件中传递props时，使用kebab-case命名时，子组件在H5端能正常监听props的变化，但是小程序无法监听到这个变化。

h691938207 1楼•5 天前

参考该issue，不要使用data-前缀定义props。

gougou168 2楼•5 天前

好的，非常感谢

yibo5220 3楼•5 天前

在 uni-app 开发微信小程序时，如果你在父组件中传递 props 给子组件，并且在子组件中使用了 kebab-case（短横线命名法）来命名 props，可能会遇到问题。这是因为在微信小程序中，props 的命名方式需要遵循驼峰式命名（camelCase），而 kebab-case 可能会导致 props 无法正确传递或解析。

问题原因

微信小程序的 props 解析机制不支持 kebab-case 命名方式。当你在父组件中使用 kebab-case 传递 props 时，微信小程序可能会无法正确识别这些 props，导致子组件无法接收到预期的值。

解决方案

使用驼峰式命名（camelCase）
在父组件中传递 props 时，使用驼峰式命名（camelCase），而不是 kebab-case。例如：

<!-- 父组件 -->
<child-component :myProp="value"></child-component>

在子组件中接收 props 时，也使用驼峰式命名：

// 子组件
export default {
  props: {
    myProp: {
      type: String,
      default: ''
    }
  }
}

在父组件中使用 camelCase，在子组件中使用 kebab-case
如果你希望在子组件中使用 kebab-case 命名 props，可以在父组件中使用 camelCase 传递 props，然后在子组件中使用 kebab-case 接收 props。不过，这种做法可能会导致代码风格不一致，因此不推荐。
```

<child-component :myProp="value"></child-component>
```
```
// 子组件
export default {
  props: {
    'my-prop': {
      type: String,
      default: ''
    }
  }
}
```

使用 props 转换
如果你必须使用 kebab-case 命名 props，可以在子组件中使用 props 转换。例如：

// 子组件
export default {
  props: {
    myProp: {
      type: String,
      default: ''
    }
  },
  computed: {
    myPropConverted() {
      return this.myProp; // 将驼峰式命名的 props 转换为 kebab-case
    }
  }
}

uni-app 微信小程序中 动态props不能使用kebab-case命名方式