Vue3的组件【<button/>】参数是Boolean对象类型,Props的参数类型也是【Boolean对象类型】但是经过Typescript转换之后则变成了boolean简单类型,为此需要手动转换才可以正常使用！

报错代码： 

<script lang="ts">
import { defineComponent } from "vue"export default defineComponent({name: "MyButton",props: {buttonLabel: {type: String,required: true},isDisabled: {type: Boolean,required: true}},
})
</script><template><div class="greetings"><!--这里如果使用props中的isDisabled的值会报错【因为isDisabled这里是一个boolean简单类型】--><button :disabled="isDisabled">ok</button><input :placeholder="buttonLabel" /></div>
</template><style scoped>
.greetings {display: flex;justify-content: center;align-items: center;height: 100%;
}button {padding: 10px 20px;font-size: 16px;cursor: pointer;
}button:disabled {background-color: grey;cursor: not-allowed;
}
</style>

正确解决方案案例：

<script lang="ts">
import { defineComponent } from "vue"export default defineComponent({name: "MyButton",props: {buttonLabel: {type: String,required: true},isDisabled: {type: Boolean,required: true}},setup(props) {/*** 1、由于按钮button的属性【:disabled="disabledButtonProps"】其中属性disabled为Vue3的Boolean类型！* 2、这里copy一份Boolean类型的参数向外部暴露,避免使用直接转换成了boolean类型的值！* 3、props中的参数本来就是一个响应式类型的值，所以不需要再次使用ref进行包装！*/const isDisabledBooleanTypeProps = props.isDisabledconst buttonLabelStringTypeProps = props.buttonLabelreturn {isDisabledBooleanTypeProps,buttonLabelStringTypeProps}}
})
</script><template><div class="greetings"><!--这里如果使用props中的isDisabled的值会报错【因为isDisabled这里是一个boolean简单类型】--><button :disabled="isDisabledBooleanTypeProps">{{ a }}</button><input :placeholder="buttonLabelStringTypeProps" /></div>
</template><style scoped>
.greetings {display: flex;justify-content: center;align-items: center;height: 100%;
}button {padding: 10px 20px;font-size: 16px;cursor: pointer;
}button:disabled {background-color: grey;cursor: not-allowed;
}
</style>