vue 封装弹窗组件注意

父组件

<template>
    <div>
    <p  @click="onDelete">
       打开
     </p>
    <!-- 弹框 -->
    <code-dialog
      :status.sync="deleteDialogStatus"
    />
  </div>
</template>
<script>
import codeDialog from "./code";
export default {
components: {
    codeDialog
  },
  name: "detailsDialog",
  data() {
    return {
      deleteDialogStatus: false
    };
  },
  methods: {
    onDelete() {
      this.deleteDialogStatus = true;
    }
};
</script>



子组件

<template>
  <div>
    <el-dialog
      title=""
      :visible.sync="show"
      :center="true"
      :show-close="false"
      :close-on-click-modal="true"
      class="deletes"
    >
    
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "codeDialog",
  data() {
    return {
      show:false
    };
  },
  props: ["status"]
  watch:{
    status(val) {
      this.show = val;
    },
    show(val) {
      this.$emit("update:status", val);
    }
  }
};
</script>

作者：Vam的金豆之路

主要领域：前端开发

我的微信：maomin9761

微信公众号：前端历劫之路