网站开发小作业,手机app定制多少钱,nas建站,自己的网站建设目录 第一版单个表单实现功能并一步步优化公共方法抽离 mixins 混入终版 form1 和 form2 组件实现 第一版单个表单实现功能并一步步优化 通过一步步代码的优化#xff0c;实现清空重置功能#xff0c;尽量做到抽离后#xff0c;可以直接复用#xff0c;不需要修改任何变量名… 目录 第一版单个表单实现功能并一步步优化公共方法抽离 mixins 混入终版 form1 和 form2 组件实现 第一版单个表单实现功能并一步步优化 通过一步步代码的优化实现清空重置功能尽量做到抽离后可以直接复用不需要修改任何变量名 先实现一版单个表单组件的清空和重置功能此时 form1 组件可以实现parent.vue父组件中调用 form1 和 form2 templatedivform1 /hr /form2 //div
/template
scriptimport form1 from /components/form1.vue;import form2 from /components/form2.vue;export default {components: {form1,form2,},};
/script form1.vue templatediv用户名input typetext v-modelform1.username / 昵称inputtypetextv-modelform1.nickname/button clickclean清空/buttonbutton clickrecover重置/button/div
/template
scriptexport default {created() {// 模拟发送请求 更改数据setTimeout(() {this.form1 { username: admin, nickname: echo };this.original JSON.parse(JSON.stringify(this.$data)); // 备份数据}, 1000);},data() {return {form1: { username: , nickname: },};},methods: {clean() {// 最容易想到的实现 1. 属性名固定不利于复用和维护// this.form1 {// username: ,// nickname: ,// };// 框架提供了this.$option 可以获取到data中定义的属性// this.form1 this.$options.data().form1; // 进阶2. 可以做到清空但不建议避免直接操作自定义的属性便于方法抽离和复用// this.$data this.$options.data(); // 报错避免修改根实例的data属性的指向可以通过覆盖属性来替换Object.assign(this.$data, this.$options.data()); // 最终 3. 使用覆盖属性而不是直接改变对象的指向},recover() {// this.form1 JSON.parse(JSON.stringify(this.original)); // 最容易想到的实现 1. 避免直接操作自定义的属性// this.$data JSON.parse(JSON.stringify(this.original)); // error 不能修改根实例的data属性的指向Object.assign(this.$data, JSON.parse(JSON.stringify(this.original))); // 最终 2. 使用覆盖属性},},};
/script 公共方法抽离 mixins 混入 如果 form2 中同样想要实现 form1 中的清空和重置功能就可以将公共的部分抽取成mixins进行混入 抽离的公共方法文件formOperation.js,(此文件中取消了优化过程和注释) export default {methods: {save() {this.original JSON.parse(JSON.stringify(this.$data));},clean() {Object.assign(this.$data, this.$options.data());},recover() {Object.assign(this.$data, JSON.parse(JSON.stringify(this.original)));},},
}; 终版 form1 和 form2 组件实现 此时 form1 中的代码简化为 templatediv用户名input typetext v-modelform1.username / 昵称inputtypetextv-modelform1.nickname/button clickclean清空/buttonbutton clickrecover重置/button/div
/template
scriptimport formOperation from ../mixins/formOperation;export default {mixins: [formOperation],created() {setTimeout(() {this.form1 { username: admin, nickname: echo };this.save();}, 1000);},data() {return {form1: { username: , nickname: },};},};
/script 此时 form2 中的代码简化为其中表单数据中的属性名可以随意定义而抽取的公共方法不需要进行任务的修改同样可以实现上述功能 templatediv用户名input typetext v-modelform2.a / 昵称inputtypetextv-modelform2.b/button clickclean清空/buttonbutton clickrecover重置/button/div
/template
scriptimport formOperation from ../mixins/formOperation;export default {mixins: [formOperation],created() {setTimeout(() {this.form2 { a: test, b: yya };this.save();}, 1000);},data() {return {form2: { a: , b: },};},};
/script
