实现通用的表单清空重置功能

目录

• 第一版单个表单实现功能并一步步优化
• 公共方法抽离 mixins 混入
• 终版 form1 和 form2 组件实现

第一版单个表单实现功能并一步步优化

通过一步步代码的优化，实现清空重置功能，尽量做到抽离后，可以直接复用，不需要修改任何变量名

先实现一版，单个表单组件的清空和重置功能，此时 form1 组件可以实现parent.vue父组件中调用 form1 和 form2

<template><div><form1 /><hr /><form2 /></div>
</template>
<script>import form1 from "@/components/form1.vue";import form2 from "@/components/form2.vue";export default {components: {form1,form2,},};
</script>

form1.vue

<template><div>用户名：<input type="text" v-model="form1.username" /> 昵称：<inputtype="text"v-model="form1.nickname"/><button @click="clean">清空</button><button @click="recover">重置</button></div>
</template>
<script>export 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 中的代码简化为：

<template><div>用户名：<input type="text" v-model="form1.username" /> 昵称：<inputtype="text"v-model="form1.nickname"/><button @click="clean">清空</button><button @click="recover">重置</button></div>
</template>
<script>import 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 中的代码简化为：其中表单数据中的属性名可以随意定义，而抽取的公共方法，不需要进行任务的修改，同样可以实现上述功能

<template><div>用户名：<input type="text" v-model="form2.a" /> 昵称：<inputtype="text"v-model="form2.b"/><button @click="clean">清空</button><button @click="recover">重置</button></div>
</template>
<script>import 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>