目录
- 第一版单个表单实现功能并一步步优化
- 公共方法抽离 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>