vue3组件使用技巧:

//有如下自组件，假如为 Child.vue
withDefaults(
  defineProps<{
    isOverflowVisible?: boolean;
  }>(),
  {
    isOverflowVisible: false,
  }
);
  
  <TModal
    v-model="isModalVisible"
    :max-width
    class="app-modal [&_.m-modal\_\_panel]:gap-md"
    :class="{
      'app-modal--visible': isOverflowVisible,
    }"
    :hide-close-icon
    :persistent
  >
  ...
  ...
  </TModal>

  <style lang="scss">
    .app-modal {
      &--visible {
        .m-modal__panel {
          @apply overflow-visible;
        }
      }
    }
</style>
  
//父组件使用
<template>

<Child is-overflow-visible>

</Child>

</template>
  
这里直接使用 is-overflow-visible， 而没有定义相关的变量(比如定义一个 isOverflowVisible, 用来赋值， 类似 :is-overflow-visible=isOverflowVisible)，这样的话子组件里的 isOverflowVisible 会渲染为 true, 这是一个很有用的细节，对于一个 bool 类型的 prop，如果父组件没有通过属性赋值，那么会被熏染为 true.
  
上面的例子还有一个细节，就是:
:class="{
      'app-modal--visible': isOverflowVisible,
    }"
  
这个主要是动态加载 app-modal--visible 这个类，注意命名，有个前缀 app-modal, 后面是 --visible, 这种风格的命名，有个好处是，在scss文件里，可以实现样式嵌套，如下:
  <style lang="scss">
    .app-modal {
      &--visible {// 这里虽然有两级，但是实际上还是改的父级样式, 这个主要是用于动态修改同级元素的样式的时候； 也可以用于子元素， 当子元素也以相同的前缀开始的话，在样式里就可以直接使用过 & 开头定义样式
        .m-modal__panel {
          @apply overflow-visible;
        }
      }
    }
</style>