el-dialog作为子组件使用，父子组件之间的传值以及关闭回调的问题

最新推荐文章于 2023-05-12 11:06:39 发布

znavdn

最新推荐文章于 2023-05-12 11:06:39 发布

阅读量415

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/znavdn/article/details/127918606

版权

父组件：

<template>
 <div class="app-container">
    <div @click="specialRefundDialog">特殊退款</div>
    <!-- 子组件 -->
    <specialReturn :special-dialog="specialDialog" @closeSpecial="handleClose" />
  </div>
</template>
<script>
import specialReturn from './specialReturn'
  export default {
    data(){
      return {
        specialDialog: false, // 子组件弹窗默认关闭
      }
    },
    methods: {
       // 打开特殊退款窗口
    specialRefundDialog() {
      this.specialDialog = true
    },
    // 关闭特殊退款窗口窗口
    handleClose() {
      this.specialDialog = false
 	   }
	 }
  }
</script>

子组件：

<template>
 <el-dialog
      :visible.sync="specialDialog"
      :before-close="handleClose"
      title="特殊退款">
    </el-dialog>
</template>
<script>
  export default {
  props: {
    specialDialog: {
      required: true,
      type: Boolean
    }
  },
    methods: {
     // 关闭特殊退款弹窗
    handleClose() {
      this.$emit('closeSpecial')
    },
    }
  }
</script>