弹窗作为子组件的应用

 引言：弹框作为子组件引入到父组件的时候，为什么子组件created会在父组件一加载就执行，而不是每次点击弹框执行？

首先值得一定需要区分的     

• v-if:是操作的是DOM结构，他会移除掉DOM结构在进行创建DOM结构
• v-show是操作的是display：none，会消失，DOM结构存在，在文档流中不会再进行占位
•  visibility是隐藏，DOM结构存在并且会在文档流中进行占位

那么在对应得过程中，对于子组件，它到底会有哪些表现

v-if,对DOM结构进行移除后进行创建，那么每一次显示必然存在组件着开始结束 === 它会经历一个组件得生命周期，数据被初始化

v-show DOM结构存在，只会跟着父组件进行一次生命周期

visibility就不用说了，毕竟DOM结构存在和v-show一样

下面看典型得例子-

elementui弹框

elementui得弹框就是典型得v-show

 因为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>

uview得u-popup

uniapp得常见uview得弹框u-popup就是典型得v-if，

每一次得显示，都会去触发created等生命周期，重点是会将数据初始化，看一个例子

筛选弹框是一个u-popup,当们进行操作选中时候，如果关闭弹框再打开，选中状态并不会被记录

综合，在自定义弹窗的时候，一定要根据实际场景进行选择