用v-model控制el-dialog弹框

最新推荐文章于 2025-02-27 00:30:35 发布

上铺的老家伙

最新推荐文章于 2025-02-27 00:30:35 发布

阅读量1.1k

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq1319504645/article/details/132030086

版权

文章介绍了在ElementUI组件库中，如何利用v-model进行el-dialog弹窗的二次封装和控制显示隐藏。在父组件中通过v-model绑定数据，子组件接收并处理关闭事件，实现简洁的父子组件通信方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element组件库中推荐用:visible.sync="dialogVisible"

如果想要对el-dialog组件进行二次封装只是控制弹框显示和隐藏可以使用v-model进行数据绑定,代码量更少

父组件中

<template>
  <div id="app">
    <el-button>控制弹窗</el-button>
<ShowDialog v-model="isShow"></ShowDialog>
</div>
</template>
<script>
import ShowDialog from "@/components/HelloWorld.vue";

export default {
 components: { ShowDialog },
  data() {
    return {
      isShow: false,
    };
  }
 
};
</script>

子组件

<template>
  <el-dialog :visible="value" width="30%" @close="handleClose" class="home">
   
  </el-dialog>
</template>
<script>
export default {
  
  props: {
    value: {
      required: true,
      type: Boolean,
    },
  },
  methods: {
    handleClose() {
      this.$emit("input", false);
    },
   
  },
};
</script>

v-model是一个语法糖等同于 :value="isShow" @input="isShow =$event.target.value"