vue3开发问题解决：[Vue warn]: Invalid prop: type check failed for prop “menuWidth“. Expected N

一、警告信息：

[Vue warn]: Invalid prop: type check failed for prop "menuWidth". Expected Number with value NaN, got String with value "124px". at <MouseMenu el=......

这个警告信息表明你在传递 menuWidth 属性时，值的类型不符合组件的期望。具体来说，menuWidth 被定义为一个 Number 类型的属性，但你传递了一个字符串值 "124px"。

二、问题分析

1. 属性定义
   在 MouseMenu 组件中，menuWidth 被定义为一个 Number 类型的属性，例如：

   props: {
     menuWidth: {
       type: Number,
       default: 200 // 默认值为数字
     }
   }

2. 传递的值
   你在父组件中传递了一个字符串值 "124px"，而不是一个数字。Vue 的类型检查发现传递的值不符合定义，因此触发了警告。

三、解决方法

要解决这个问题，你需要确保传递给 menuWidth 的值是一个数字类型，而不是字符串。以下是几种解决方法：

方法 1：传递纯数字值

如果你只需要传递宽度的数值部分，可以直接传递一个数字：

<MouseMenu :menuWidth="124" />

 这样，menuWidth 接收到的是一个数字 124，而不是字符串 "124px"。

方法 2：在父组件中解析数值

如果你的宽度值是一个带单位的字符串（如 "124px"），可以在父组件中解析出数字部分：

const menuWidth = '124px';
const menuWidthNumber = parseFloat(menuWidth); // 解析为数字 124

然后传递解析后的数字：

<MouseMenu :menuWidth="menuWidthNumber" />

方法 3：在子组件中处理字符串值

如果你无法控制父组件传递的值，可以在子组件中处理字符串值。例如，你可以修改 props 的验证逻辑，允许接收字符串，并在内部解析为数字：

props: {
  menuWidth: {
    type: [Number, String], // 允许接收 Number 或 String
    default: '200px'
  }
},
mounted() {
  if (typeof this.menuWidth === 'string') {
    this.menuWidth = parseFloat(this.menuWidth); // 解析为数字
  }
}

方法 4：调整组件的 props 定义

如果 menuWidth 本身可以接受带单位的字符串（如 "124px"），你可以直接修改 props 的定义，允许接收字符串类型：

props: {
  menuWidth: {
    type: String,
    default: '200px'
  }
}

然后在组件内部根据需要处理这个字符串值。 

四、总结

这个警告的根本原因是传递给 menuWidth 的值类型不符合组件的期望。解决方法包括：

1. 确保传递的值是数字类型。

2. 在父组件中解析字符串为数字。

3. 在子组件中处理字符串值并解析为数字。

4. 调整 props 的定义以接受字符串类型。

根据你的具体需求选择合适的方法。这里我用了方法1去解决。

五、解决如下：

menuWidth: '124px',

改为：

menuWidth: 124,