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

目录

• 第一版单个表单实现功能并一步步优化
• 公共方法抽离 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" /> 昵称：<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>