这里有个比较值得注意的点，就是关闭查看弹窗，弹窗的开启关闭状态通过list也就是父级中的viewShow来控制，viewShow通过view也就是子级中的props流入到子级中，但是vue中的数据流向是默认是单向的，想要子级中修改父级属性必须使用emit，详见上面代码。
这里原先使用elementUI的dialog组件的自己的关闭，会报错，只能自己修改了。
ps: 为什么这里不用vuex处理父子组件的通信？因为如果是一个大型的后台管理系统，像这样的情况会经常发生，如果都放在vuex中管理，那vuex的体积会非常庞大，反而不利于维护。
8. 联系人编辑(新增)页 --- edit.vue
<template> <div> <el-form ref="contactForm" :model="form" :rules="rules" label-width="80px"> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="性别"> <el-select v-model="form.sex" placeholder="请选择性别"> <el-option label="男" value="male"></el-option> <el-option label="女" value="female"></el-option> </el-select> </el-form-item> ... <el-form-item label="备注"> <el-input type="textarea" v-model="form.desc"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit('contactForm')">{{ btnName }}</el-button> <el-button @click="cancelForm">取消</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data () { var nameValid = (rule, value, callback) => { if (!value) { callback(new Error('姓名不能为空')) } else { callback() } } var mobileValid = (rule, value, callback) => { let phonePattern = /(^\s*$)|(^[1][3,4,5,7,8][0-9]{9}$)/ if (value && !phonePattern.test(value)) { callback(new Error('手机号格式不正确')) } else { callback() } } return { type: '', // 控制是否是新建 ... rules: { name: [{validator: nameValid, trigger: 'blur'}], mobile: [ // {required: true, message: '手机号不能为空', trigger: 'blur'}, {validator: mobileValid, trigger: 'blur'} ] } } }, // 组件加载后的钩子 mounted: function () { this.checkPageStatus(this.$route.query.id) }, // 路由在组件中的钩子 beforeRouteUpdate: function (to, from, next) { this.checkPageStatus(to.query.id) next() }, methods: { // 检查页面是新建还是编辑 checkPageStatus: function (id) { ... }, cancelForm: function () { this.$router.push('/contact') }, onSubmit: function (formName) { ... } } } </script>
可以看到mounted与beforeRouteUpdate中的代码有些重合，那是因为vue在路由仅仅只是参数变换的时候，是不会重新重新加载组件的，所以需要在beforeRouteUpdate中处理初始的数据。
nameValid与mobileValid为表单验证的函数，el-form配置rules属性名称，然后data中相应的添加rules即可开启表单验证，但是有一点一定要注意el-form-item上一定要设置对应的prop属性，rules才会生效。
9. 总结
非常简单的一个项目，但是有几个点一定要关注好：
模块的划分，模块划分要合理，尽量能保证模块的复用性
状态的管理，一定要明确什么东西要放vuex中，什么东西不用放，以免使项目的维护反而变得更复杂
如果是大型项目，路由中一定要让.vue文件在需要时再引入，否则会加重初次加载的负担
为了减少篇幅，删减了很多不重要的代码，需要查看源码请移步，项目地址： https://github.com/junjunhuahua/vue-basic-demo
github上的项目已改为后台提供接口，不再使用localStorage操作数据，后台项目使用MongoDB+node实现，具体项目：https://github.com/junjunhuahua/mongodb-demo