vue弹出框消息重置问题---一个投机取巧的方法

不知道大家对v-if与v-show是否了解

v-if  只加载符合条件的，不符合条件的会消亡

v-show    全部加载，只显示符合条件的

 

利用v-if的特性  我们就可以用一个比较投机取巧的方式重置弹出框表单的初始化

 

<el-dialog title="XXX" :visible.sync="dialogOpen" top="5%" size="large">
    <CheckPage v-if="pageShow==true"></CheckPage>
</el-dialog>

在要弹出的那个组件设一个属性，然后在用watch函数监听dialogOpen（初始时可定设为false），再点击弹出按钮后会设为true，然后在关闭弹出框时

dialogOpen会自动变为false，这时会监听到，将pageshow设为false，这样下次再打开CheckPage这个组件，里面表单填写的内容就会重置了。

 watch:{
            dialogOpen: function (curVal, oldVal) {
                if (curVal == true) {//弹窗打开
                    this.checkPageShow = true;
                } else {//弹窗关闭
                    this.checkPageShow = false;
                }
            },
        }