什么是 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 与表单组件的值进行双向绑定。在父组件中可以访问和修改表单的值。