版权声明：本文为博主原创文章，未经博主允许不得转载。博主地址：http://blog.csdn.net/freewebsys https://blog.csdn.net/freewebsys/article/details/81156792
本文的原文连接是:
https://blog.csdn.net/freewebsys/article/details/81156792
博主地址是：http://blog.csdn.net/freewebsys
1，问题
使用弹出窗口，只是进行显示和隐藏功能。
每次再创建新窗口的时候会保存上次的校验信息。
但是vue 是按照组件方式显示的，再新创建按钮的时候是不能访问dialog组件的。
2，通过before-close 事件解决
编写：
<el-dialog title="用户编辑" :visible.sync="dialogVisible" :before-close="closeDialogFunc">
<el-input v-model="dataForm.id" placeholder="id" type="hidden"/>
<el-form label-width="100px" :model="dataForm" :rules="dataFormRules" ref="dataForm">
<el-form-item label="用户名" prop="userName"><el-input v-model="dataForm.userName" placeholder="类型"/></el-form-item>
<el-form-item label="密码" prop="password"><el-input v-model="dataForm.password" placeholder="类型"/></el-form-item>
<el-form-item label="昵称" prop="nickName"><el-input v-model="dataForm.nickName"/></el-form-item>
<el-form-item label="角色" prop="role"><el-input v-model="dataForm.role"/></el-form-item>
<el-form-item label="状态" prop="status"><el-input v-model="dataForm.status"/></el-form-item>
<el-form-item label="类型" prop="type"><el-input v-model="dataForm.type"/></el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="closeDialogFunc">取 消</el-button>
<el-button type="primary" @click="saveFunc">确 定</el-button>
</span>
</el-dialog>
.....关闭事件可以访问到 dataForm 组件，【新建】按钮不行
methods: {
closeDialogFunc: function(){
this.$refs['dataForm'].resetFields()
this.dialogVisible = false
},
....更多dailog窗口的参数参考官方文档：
http://element-cn.eleme.io/#/zh-CN/component/dialog
3，总结
vue 使用的是组件化开发，遇到一个问题，每个组件里面的东西不能互相访问。
虽然是再一个页面里面的，但是发现，【新建】按钮是访问不了 dailog的属性的。
用了 this.$refs[‘dataForm’] 也是返回 空，只能再dailog里面使用:before-close 的事件处理了。但也是解决了，再有问题就需要组件间相互通讯了。
https://cn.vuejs.org/v2/guide/components.html
本文的原文连接是:
https://blog.csdn.net/freewebsys/article/details/81156792
博主地址是：http://blog.csdn.net/freewebsys