【vue】父页面按钮显示子组件中的el-dialog

最新推荐文章于 2024-02-18 17:11:48 发布

原创最新推荐文章于 2024-02-18 17:11:48 发布 · 1.5k 阅读

12 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

37 篇文章

订阅专栏

这篇博客介绍了在Vue中如何通过props从父组件向子组件传递属性，以及利用$emit触发父组件的方法来控制对话框的显示与关闭。例子展示了如何在父组件中定义一个导入按钮，点击后弹出子组件对话框，并在子组件中实现关闭对话框的功能，强调了dialogVisible属性的传递和更新机制。

1.父页面

<template>
    <div>
      <el-button
        type="primary"
        icon="el-icon-upload2"
        size="small"
        @click="openDialog"
      >导入</el-button>
      <uploadDialog ref="uploadDialog" :dialogVisible="dialogVisible" @closeDialog="dialogVisible = false"></uploadDialog>
    </div>
</template>
<script>
//  子组件
import uploadDialog from '@/components/uploadDialog'
export default {
  name: 'test',
  components: {
    uploadDialog
  },
  data() {
    return {
      dialogVisible: false,
    }
  },
  methods: {
    openDialog() {
      this.dialogVisible = true
    }
  }
}
</script>
<style scoped>
</style>

2.子页面

<template>
  <el-dialog title="对话框"  :visible.sync='dialogVisible' :before-close="closeDialog" append-to-body>
    <div class="file-upload">
        <el-button type="primary" size="small" >保存</el-button>
        <el-button @click="closeDialog" size="small">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'uploadDialog',
  props: {
    dialogVisible: {
      type: Boolean
    }
  },
  data() {
    return {
    }
  },
  methods: {
    // 关闭对话框
    closeDialog() {
      this.$emit('closeDialog')
    }
  }
}
</script>
<style lang='scss' scoped>
</style>

3.说明

【说明】
1.dialogVisible是父页面传过来的属性，子页面无法更改，
需要调用父类的方法修改，即this.$emit('closeDialog')
2.父页面中需要在子页面上添加@closeDialog方法
3.父页面中需要给子页面传递dialogVisible属性

4.示例图片

在这里插入图片描述