vue2.x 二次封装element ui 中的el-dialog-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue2.x 二次封装element ui 中的el-dialog。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在做后台管理系统的时候，dialog组件是我们使用频率比较高的组件，但是有一些需求现有的组件是不满足的。因此会需要我们做二次封装。
组件本身的属性我们保留，只需要根据需求添加，然后在使用的时候props去拿取使用就可以了。
本次遇到的问题是如何在父组件去控制dialog的展示关闭。之前有尝试过使用watch去监听props的值，是可以做到想到的效果，但是代码稍微有一些冗余。
这次试试新的写法，由于props是单向数据流，所以这里选择使用computed，在父组件改变值的时候，对应的dialog就会相应的改变状态。剩下的就是在dialog关闭的时候，需要通知父组件状态的变化。如下：

<template>
  <div>
    <el-dialog
      :visible.sync="showDialog"
    >
      123
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  props: {
    visible: {
      type: Boolean
    }
  },
  computed: {
    showDialog: {
      get() {
        return this.visible
      },
      set(val) {
        console.log(val)
        this.$emit('update:visible', val) // visible 改变的时候通知父组件
      }
    }
  }
}
</script>

然后在父组件使用的时候，直接引入父组件，然后绑定值即可文章来源地址https://www.toymoban.com/news/detail-730023.html

<review-dialog :visible.sync="showReviewDialog" />

import reviewDialog from '../components/reviewDialog'
  components: {
    reviewDialog
  },

  data() {
    return {
      showReviewDialog: false, //展示弹窗
      }
     }
    )