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

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

时间:2023-08-01 17:11:35浏览次数:32  
标签:中封 dialogVisible update 组件 const model modelValue

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

标签:中封,dialogVisible,update,组件,const,model,modelValue
From: https://www.cnblogs.com/lsc-boke/p/17597533.html

相关文章

  • Vant组件库,表单校验时使用Toast组件弹出消息
     在使用Vat组件的表单时,校验规则会出现在表单的下面,造成样式紊乱而且不美观。通过Taost组件实现校验信息的轻提示,简约美观方便的使用函数校验和正则校验来实现多功能校验。          Toast组件原来样式:                  ......
  • 在线直播系统源码,vant 轮播图组件
    在线直播系统源码,vant轮播图组件 <template> <van-swipe:autoplay="3000"indicator-color="#1baeae">  <van-swipe-itemv-for="(item,index)inlist":key="index">   <img:src="item.carouselUrl"......
  • Tomcat9 无法启动组件[Connector[AJP/1.3-8009]]
    无法启动组件[Connector[AJP/1.3-8009]]在tomcat中开启ajp后,启动tomcat遇到错误无法启动组件[Connector[AJP/1.3-8009]]。错误原因缺少配置项secretRequired。tomcat9提供的默认的AJP配置如下:<Connectorprotocol="AJP/1.3"address="::1"port="800......
  • 前端Vue自定义精美商品分类组件category 可用于电商应用分类页面
    随着技术的不断发展,传统的开发方式使得系统的复杂度越来越高。在传统开发过程中,一个小小的改动或者一个小功能的增加可能会导致整体逻辑的修改,造成牵一发而动全身的情况。为了解决这个问题,我们采用了组件化的开发模式。通过组件化开发,可以有效地实现单独开发,单独维护,而且它们之间......
  • vue中使用provide和inject依赖注入组件之间进行父子组件传值(也适用于嵌套路由)
      父组件中:provide:function(){return{reload:this.reload//父组件中的方法}}子组件中:inject:['reload']使用:this.reload()//也可传入参数......
  • 组件化、跨平台…未来前端框架将如何演进?
    前端框架在过去几年间取得了显著的进步和演进。前端框架也将继续不断地演化,以满足日益复杂的业务需求和用户体验要求。从全球web发展角度看,框架竞争已经从第一阶段的前端框架之争(比如Vue、React、Angular等),过渡到第二阶段的框架之争(比如Next、Nuxt、Remix、小程序等)。组件化开发的......
  • 若误删了系统某组件或注册表引起系统不稳定或杂疑问题的解决方法之一
    若误删了系统某组件或注册表引起系统不稳定或杂疑问题的解决方法:方法1:恢复到先前的系统还原点打开"控制面板-选择大图标-恢复-系统还原-上个还原点",它可以还原系统文件和设置,从而解决我们所遇到的问题方法2:使用 sfc/scannow 命令检查和修复系统文件的完整性。以下是在Win......
  • 自定义Android组件之带图像的TextV…
    本文为新书《Android/OPhone开发完全讲义》的内容连载。《Android/OPhone开发完全讲义》一书将在近期出版,敬请关注。 Android系统支持的图像格式)的TextView组件。在编写代码之前,先看一下Android组件的配置代码。1.<TextViewandroid:id="@+id/textview1"android:layout_width......
  • Unity UGUI的Shadow(阴影)组件的介绍及使用
    UnityUGUI的Shadow(阴影)组件的介绍及使用1.什么是Shadow(阴影)组件?Shadow(阴影)组件是UnityUGUI中的一个特效组件,用于在UI元素上添加阴影效果。通过调整阴影的颜色、偏移、模糊等属性,可以使UI元素看起来更加立体和有层次感。2.Shadow(阴影)组件的工作原理Shadow(阴影)组件......
  • 大二暑期实习记录(一):处理组件绑定数据错误(数组解构,map()方法)
    好家伙,搬砖 今天在做组件迁移(从一个旧平台迁移到一个新平台)的时候,发现了一些小小的问题: 1.错误描述:在穿梭框组件中,使用"节点配置"方法添加数据的时候,左测数据选择框直接消失了这里我们猜测一下,大概是数据处理出了问题此处,我们使用"数据绑定"绑定数据方法: ......