封装element弹窗组件使用sync

最新推荐文章于 2024-06-17 16:23:51 发布

小墨宝

最新推荐文章于 2024-06-17 16:23:51 发布

阅读量405

点赞数

分类专栏： vue 文章标签：前端

本文链接：https://blog.csdn.net/qq_38935512/article/details/125893432

版权

vue 专栏收录该内容

130 篇文章 1 订阅

订阅专栏

父组件调用，使用 :show.sync=“addBox.show”

<!-- 新增 -->
    <add-data
      v-if="addBox.show"
      :show.sync="addBox.show"
      :detail="addBox"
      :formOptions="formOptions"
      @update="getList()"
    ></add-data>

弹窗组件需要使用计算属性来过渡，不然直接使用自定义事件去改变show可以是可以，但是element右上角自带的关闭会报错（还是能关闭的）

<template>
  <el-dialog :close-on-click-modal="false" title="新增" :visible.sync="shows" width="80%">
    <span slot="footer" class="dialog-footer">
      
      <el-button @click="shows = false">取消</el-button>
    </span>

  </el-dialog>
</template>

<script>

  export default {
    props: {
      show: {
        type: Boolean,
        default: false
      },
      formOptions: {
        type: Object,
        default: () => {}
      },
      detail: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        
      };
    },
    computed: {
     
      shows: {
        get() {
          return this.show;
        },
        set(newValue) {
          this.$emit('update:show', newValue);
        }
      }
    },

 
    methods: {
      
     
  };
</script>