vue3 绑定form弹窗的方式

一、v-model="visibleProject"对应 :visible="model" const model = defineModel({ type: Boolean });

可以 在组件里对子组件visible 绑定的model单独监听

父组件
  <projectAllocation v-model="visibleProject"></projectAllocation>
 import projectAllocation from "./componts/project-allocation.vue";
 const visibleProject = ref(false);

 子组件弹窗
 <template>
    <!-- <div>项目分配</div> -->
    <a-drawer :visible="model" width="800px" title="详情" ok-text="关闭" :hideCancel="true"></a-drawer>
</template>

<script setup>
import { reactive, ref, watch } from "vue";

const model = defineModel({ type: Boolean });
watch(model, () => {
    if (model.value) {
        console.log(model.value, "dddddddddddd");
    }
});
</script>

<style lang="scss" scoped></style>

二、v-model:visible="visibleProject" 对应 v-bind="$attrs"

v-bind="$attrs" 的作用是将父组件传递给当前组件的所有非 prop 特性动态地绑定到 <a-drawer> 组件上。

这种用法通常在开发基础组件时非常有用，因为它允许你在不清楚父组件会传递哪些特性的情况下，将所有的非 prop 特性都传递给子组件。这样可以实现对特性的透传，使得父组件可以自定义子组件的外观和行为。

举个例子，如果父组件包含类似 class、style 等特性，通过使用v-bind="$attrs"，这些特性都会被动态地绑定到 <a-drawer> 组件上，从而实现了对外部特性的透传。

 父组件
 <projectAllocation v-model:visible="visibleProject"></projectAllocation>
 import projectAllocation from "./componts/project-allocation.vue";

 子组件弹窗
   <template>
    <!-- <div>项目分配</div> -->
    <a-drawer v-bind="$attrs" width="800px" title="详情" ok-text="关闭" :hideCancel="true"></a-drawer>
</template>

<script setup>
import { reactive, ref, watch } from "vue";
</script>

<style lang="scss" scoped></style>