vue3+ts传参父传子布尔类型

在 Vue 3 中，如果你使用 TypeScript 来编写组件，当你需要从父组件向子组件传递一个布尔类型的值时，你可以通过 props (属性) 的方式来进行。首先，在父组件里，定义一个布尔类型的 prop：

<template>
  <ChildComponent :isDisabled="isParentDisabled" />
</template>

<script lang="ts">
import { Component, Prop } from 'vue';
export default class ParentComponent extends Component {
  @Prop({ type: Boolean, required: false }) isParentDisabled: boolean;
}
</script>

然后，在子组件 `ChildComponent` 的 TypeScript 定义中，接受这个布尔型的 prop 并处理它：

<template>
  <div v-if="!isDisabled">显示内容...</div>
</template>

<script lang="ts">
import { PropType } from 'vue';

export default {
  name: 'ChildComponent',
  props: {
    isDisabled: {
      type: Boolean as PropType<boolean>,
      default: false,
      // 或者可以设置空值判断，默认值可以是 null、undefined 或默认为 false
      required: false,
    },
  },
};
</script>

这样，父组件可以控制子组件的状态，只需要改变 `isParentDisabled` 的值即可。如果不需要传递默认值，可以在 `props` 中省略 `default` 部分。