vue子组件弹窗 el-dialog_vue el-dialog-CSDN博客

本文链接：https://blog.csdn.net/Q10CAU/article/details/104824971

本文介绍如何在Vue项目中结合ElementUI实现子组件弹窗功能。通过父组件点击事件控制子组件弹窗显示，利用props进行数据传递，并通过computed属性和$emit更新值，实现数据双向流通。

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

弹窗

在vue中结合elementui.在父组件中通过点击事件，控制子组件弹窗显示

将父组件的值通过props的方式传递给子组件弹窗
子组件通过computed的方式来获取值和设置新值，在set中调用$emit(‘update:porp’)方法
整个过程通过.sync来完成数据的双向流通

父组件

<template>
    <div class="rightsContainer">
        <el-button size="small" @click="showDialog = !showDialog">显示弹窗</el-button>
        <cardCustomRightsDialog :visible.sync="showDialog"></cardCustomRightsDialog>
    </div>
</template>
<script>
export default {
  components: {
    cardCustomRightsDialog: () => import('./cardCustomRightsDialog')
  },
  data () {
    return {
      showDialog: false
    }
  }
}
</script>

子组件弹窗

<template>
    <div>
        <el-dialog
            :visible.sync="dialogVisiable"
            title="自定义权限"
        >

        </el-dialog>
    </div>
</template>
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    dialogVisiable: {
      get () {
        return this.visible
      },
      set (val) {
        console.log(val)
        this.$emit('update:visible', val)
      }
    }
  }
}
</script>
<style scoped lang="scss">

</style>

在这里插入图片描述

弹窗的确定和取消

elementui 自定义内容的示例展示提供了很便捷的插槽方式，唯一要注意的是，我们把click事件中的处理的参数变成自己的就好了，

   <div slot="footer" class="dialog-footer">
       <el-button @click="dialogVisiable = false">取 消</el-button>
       <el-button type="primary" @click="dialogVisiable = false">确 定</el-button>
   </div>

在这里插入图片描述