父组件控制el-dialog展示关闭

最新推荐文章于 2024-07-09 21:18:14 发布

breeze1307

最新推荐文章于 2024-07-09 21:18:14 发布

阅读量465

点赞数 11

文章标签： vue.js 前端 typescript elementui

本文链接：https://blog.csdn.net/AloneQi/article/details/137272380

版权

本文介绍了如何在Vue.js中，通过父组件控制子组件el-dialog的展示和关闭，利用v-model和props/emits进行组件间的通信。

摘要由CSDN通过智能技术生成

父组件控制 el-dialog 对话框展示/关闭

父组件

<el-button type="primary" @click="createProject">新建项目</el-button>
 <!-- 此处使用v-model是为了便于后续调用默认自定义事件'update:modelValue' -->
<AddOrEditDialog v-model="proDialogVisible" />
<script lang='ts' setup>
import { ref} from 'vue'
const proDialogVisible = ref<boolean>(false)
// 新建项目
const createProject = () => {
  proDialogVisible.value = true
}
</script>

子组件

<template>
<!-- 此处必须使用v-model，否则组件不显示 -->
  <el-dialog v-model="dialogVisible" width="500" @close="handleClose">
    <template #header>
        <h4>新建项目</h4>
    </template>
    <span>This is a message</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">Cancel</el-button>
        <el-button type="primary" @click="handleClose">Confirm</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { defineEmits, computed } from 'vue';
let props=defineProps(['modelValue'])
let $emit = defineEmits(['update:modelValue'])
// 因为父组件传过来的值，不能使用v-model双向绑定，所以这里使用computed计算属性
let dialogVisible= computed(() => {
    return props.modelValue
})
// 关闭回调
const handleClose = () => { 
    $emit('update:modelValue', false)
}
</script>

<style lang="scss" scoped></style>