实现通用的表单清空重置功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了实现通用的表单清空重置功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

先实现一版，单个表单组件的清空和重置功能，此时 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 中的代码简化为：其中表单数据中的属性名可以随意定义，而抽取的公共方法，不需要进行任务的修改，同样可以实现上述功能文章来源地址https://www.toymoban.com/news/detail-691050.html

<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>

到了这里，关于实现通用的表单清空重置功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！