vue3之父组件中封了子组件的抽屉(弹框类)，通过update:modelValue来进行父子组件的v-model="dialogVisible"通讯

影ing / 2023-08-01 / 原文

eg:父组件a.vue

<AddAiDrawer
                :projectId="route.query.id"
                v-model="addAiShow"
                title="新增"
                type="spaceAi"
                @call-back-table="refreshTable"
            ></AddAiDrawer>

//新增
const addAiShow = ref(false);
//打开新增
const openAddAi = () => {
    addAiShow.value = true;
};

子组件:addAiDrawer.vue

<el-drawer v-model="dialogVisible" :title="props.title" size="30%" :destroy-on-close="true" @close="resetAI()">
        
        <template #footer>
            <el-button type="" @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="saveAddAi(addAiFromRef)">保存</el-button>
        </template>
    </el-drawer>

const emit = defineEmits(["update:modelValue", "callBackTable", "callBackData"]);
const dialogVisible = computed({
    get() {
        return props.modelValue;
    },
    set(newValue) {
        emit("update:modelValue", newValue);
    }
});

总结:子组件和父组件都可以通过事件控制v-model的状态值进行抽屉的显示隐藏