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

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的状态值进行抽屉的显示隐藏

posted @   影思密达ing  阅读(381)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示