【Vue 表单类组件封装与 v-model 简化代码】

文章目录

• • 什么是 Vue 表单类组件？
  • 封装 Vue 表单类组件
  • • 步骤1：创建一个表单组件
    • 步骤2：使用 `v-model` 简化数据绑定
    • 步骤3：将表单组件封装
    • 步骤4：在父组件中使用表单组件

什么是 Vue 表单类组件？

Vue 表单类组件是一种将表单元素（如输入框、复选框、单选框等）封装成可复用的组件的方式。这些组件可以在不同的页面和项目中使用，提高了代码的可维护性和可重用性。

封装 Vue 表单类组件

步骤1：创建一个表单组件

创建一个 Vue 组件，命名为 MyForm，并在该组件内定义一个表单元素，例如文本输入框。

<template>
  <div>
    <input type="text" v-model="inputValue" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: "",
    };
  },
};
</script>

步骤2：使用 v-model 简化数据绑定

上述代码中使用了 v-model 指令将输入框的值与 inputValue 数据属性进行双向绑定。在父组件中可以使用 v-model 控制该表单元素。

步骤3：将表单组件封装

将 MyForm 组件封装成可复用的表单组件。可以通过添加 props 和 emits 属性来实现。

<template>
  <div>
    <input type="text" v-model="inputValue" />
  </div>
</template>

<script>
export default {
  props: {
    value: String, // 接收父组件的值
  },
  emits: ["input"], // 发射 input 事件
  data() {
    return {
      inputValue: this.value,
    };
  },
  watch: {
    value(newValue) {
      this.inputValue = newValue; // 监听 value 变化
    },
    inputValue(newValue) {
      this.$emit("input", newValue); // 触发 input 事件
    },
  },
};
</script>

步骤4：在父组件中使用表单组件

在父组件中使用封装的表单组件 MyForm 并使用 v-model 来简化代码。

<template>
  <div>
    <my-form v-model="formData" />
  </div>
</template>

<script>
import MyForm from "./MyForm.vue";

export default {
  components: {
    MyForm,
  },
  data() {
    return {
      formData: "",
    };
  },
};
</script>

上述代码中将 MyForm 组件引入到父组件中，并使用 v-model 将 formData 与表单组件的值进行双向绑定。在父组件中可以访问和修改表单的值。