实现通用的表单清空重置功能
第一版单个表单实现功能并一步步优化
通过一步步代码的优化，实现清空重置功能，尽量做到抽离后，可以直接复用，不需要修改任何变量名
先实现一版，单个表单组件的清空和重置功能，此时 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" /> 昵称：<input
type="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" /> 昵称：<input
type="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" /> 昵称：<input
type="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>
