element彈框作爲子組件的應用

 引言：很好奇彈框作爲子組件引入父組件的時候，爲什麼created會在父組件一加載就執行，而不是每次點擊彈框執行，因此有了這篇總結(當然可以忽略這段話，哈哈)

 

首先值得一定需要區分的

      v-if:是操作的是DOM結構，他會移除掉DOM結構在進行創建DOM結構

      v-show是操作的是display：none，會消失，DOM結構存在，在文檔流中不會再進行佔位

      visibility是隱藏，DOM結構存在並且會在文檔流中進行佔位

 

現在在來思考一下爲什麼子組件的created會在父組件加載時執行 ？？

   因爲element的彈框是控制的display屬性，既然是display,也就是說他會進行DOM結構，引入的子組件會隨着父組件加載而加載， 因此不管如何控制彈框的顯示隱藏，都不會再顯示的時候再去執行created，created只會在父組件加載的時候加載一次

 

因爲對於一個彈框，寫法比較好的是

 監聽彈框是否顯示，一旦進行顯示，在進行頁面的其他操作，比如修改數據格式等，這樣子的代碼可讀性會更高

<template>
  <div class="effectiveRule">
    <!-- 新增調撥 -->
    <el-dialog title="生效規則詳情" :visible="dialogVisible" width="600px" @close="inStoreClose">
     


      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="inStoreClose">關閉</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ['effectiveRuleFlag', 'effectiveDetail'],
  data() {
    return {
      dialogVisible: this.effectiveRuleFlag,
      detail: {}
    };
  },
  watch: {
    //監聽彈框變化在進行操作
    effectiveRuleFlag(val) {
      if (val) {
        this.dialogVisible = val;
        this.detail = JSON.parse(JSON.stringify(this.effectiveDetail));
        this.getEffectiveDetail();
      } else {
        this.dialogVisible = val;
        this.detail = {};
      }
    }
  },
  methods: {
    inStoreClose() {
      this.dialogVisible = false;
      this.$emit('closeEffeFlag', false);
    },
    getEffectiveDetail() {
    }
  }
};
</script>