Vue中如何从父组件向子组件传递自定义prop isReadonly并正常生效？

问题定位 #

现有代码父组件的传值写法符合Vue规范，问题出在子组件的Prop声明语法错误：

• 你在子组件中写isReadonly: { Boolean }属于无效的Prop配置语法，该写法等价于声明了一个值为{ Boolean: undefined }的配置对象，Vue无法识别该Prop的类型校验规则，会导致Prop接收异常。

修复方法 #

第一步：修正子组件Prop声明 #

将子组件的props配置修改为以下任意一种规范写法即可：

// 写法1：简洁类型声明
props: {
  isReadonly: Boolean
},

如果需要增加默认值、必填校验等配置，使用完整写法：

// 写法2：完整配置声明
props: {
  isReadonly: {
    type: Boolean,
    default: false, // 未传值时的默认值
    required: false // 是否为必填项
  }
},

第二步：（可选）适配v-select交互规则 #

如果你使用的是Vuetify框架的v-select组件，readonly属性仅会禁止输入但仍允许展开下拉选项，如果你需要完全禁用组件交互，可以将模板中的readonly绑定替换为disabled：

<v-select
  <!-- 其他原有属性保持不变 -->
  :disabled="isReadonly"
>

验证方法 #

可以在子组件的mounted生命周期钩子中打印Prop值，确认传递是否正常：

export default {
  // 其他配置不变
  mounted() {
    console.log('接收到的isReadonly：', this.isReadonly)
  }
}

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