Vue3组件props异常：templates-types为undefined却出现在attrs中

以下是几种常见的触发该问题的情况：

• Prop名称大小写/格式不匹配
  Vue中Prop定义遵循驼峰（camelCase）与短横线（kebab-case）的对应规则：组件内用驼峰定义的Prop，模板中需用短横线格式传递；若要直接用短横线定义Prop，必须用引号包裹名称。
  错误示例：

  // 组件内错误定义
  props: {
    templates-types: { /* 配置项 */ } // 未用引号包裹短横线名称
  }
  

  正确写法1（驼峰定义+短横线传递）：

  // 组件内
  props: {
    templatesTypes: {
      type: Array, // 示例类型
      required: true
    }
  }
  

  <!-- 父组件传递 -->
  <image-template-row-item :templates-types="yourTemplateData"></image-template-row-item>
  

  正确写法2（短横线定义）：

  props: {
    'templates-types': { /* 配置项 */ }
  }
  

• Prop注册错误
  检查组件内是否将Prop正确放在props选项中，避免拼写错误（比如把props写成prop），或Prop名称本身拼写错误（如少写字符、符号错误）。

• 未使用动态绑定传递值
  如果传递的是数组、对象等非字符串类型数据，必须用:（v-bind）绑定动态值。若直接写静态字符串（如<image-template-row-item templates-types="test"></image-template-row-item>），且Prop类型校验不通过，也可能导致值落入Attrs。

• 组件导入/注册错误
  确认父组件导入的image-template-row-item是目标组件，避免导入错误文件，或组件注册名称与模板中使用的标签名不匹配。

内容的提问来源于stack exchange，提问作者Muhammad Essam