首页watch: { memberKey (value) { this.choosePeopleKey = value }, choosePeopleKey (data) { this.$emit('change', data) },

watch: { memberKey (value) { this.choosePeopleKey = value }, choosePeopleKey (data) { this.$emit('change', data) },

时间: 2024-06-01 21:07:35 浏览: 19

【JavaScript源代码】Vue模仿ElementUI的form表单实例代码.docx

Vue模仿ElementUI的form表单实例代码　　模仿 ElementUI 的表单，分为四层结构：index 组件、Form 表单组件、FormItem 表单项组件、Input 和 CheckBox 组件，具体分工如下：　　index 组件：　　实现：分别引入 Form 组件、FormItem 组件、Input 组件，实现组装；　　Form 表单组件：　　实现：预留插槽、管理数据模型 model、自定义校验规则 rules、全局校验方法 validate；　　FormItem 表单项组件：　　实现：预留插槽、显示 label 标签、执行数据校验、显示校验结果；　　 ### Vue模仿ElementUI的form表单实例代码解析 #### 一、概述本文将详细介绍一个模仿ElementUI的Vue表单实现方案，该方案通过构建四层结构：`index`组件、`Form`表单组件、`FormItem`表单项组件、`Input`与`CheckBox`组件来实现一个功能完备的表单系统。下面我们将逐一分析每个组件的功能以及其实现细节。 #### 二、组件层次结构及功能介绍 1. **`index`组件**: - **职责**: 负责引入其他三个主要组件（`Form`、`FormItem`、`Input`）并组装它们。 - **实现**: 在这个组件中，开发者会将表单元素组织在一起，以便于最终呈现一个完整的表单。 2. **`Form`表单组件**: - **职责**: 管理整个表单的数据模型(`model`)、自定义校验规则(`rules`)以及全局校验方法(`validate`)。 - **实现**: 该组件提供了一个预留插槽，用于插入具体的表单项(`FormItem`)，同时它还负责维护表单数据以及定义校验逻辑。 3. **`FormItem`表单项组件**: - **职责**: 显示标签(`label`)、执行数据校验、显示校验结果。 - **实现**: 这个组件会根据传入的`label`属性来展示对应的标签，并且负责调用校验逻辑。如果校验失败，它还需要展示错误消息。 4. **`Input`和`CheckBox`组件**: - **职责**: 绑定数据模型(`v-model`)、通知父组件(`FormItem`)执行校验。 - **实现**: 这两个组件都需要实现`v-model`的绑定，即实现`:value`和`@input`或`:checked`和`@change`。当数据变化时，它们会触发校验。 #### 三、具体实现详解 1. **`Input`组件实现**: ```html <template> <div> <input :value="value" @input="onInput" v-bind="$attrs" /> </div> </template> <script> export default { inheritAttrs: false, // 避免顶层容器继承属性 props: { value: { type: String, default: "" } }, data() { return {}; }, methods: { onInput(e) { this.$emit("input", e.target.value); // 通知父组件数值发生变化 this.$parent.$emit("validate"); // 通知FormItem执行校验 } } }; </script> <style scoped></style> ``` - **注意**: 使用`this.$parent.$emit("validate")`来通知父组件执行校验，但这种方式不够健壮，尤其是在父子组件间存在多级嵌套的情况下。更健壮的方法是通过自定义事件或Vuex状态管理库来进行通信。 2. **`CheckBox`组件实现**: ```html <template> <section> <input type="checkbox" :checked="checked" @change="onChange" /> </section> </template> <script> export default { props: { checked: { type: Boolean, default: false } }, model: { prop: "checked", event: "change" }, methods: { onChange(e) { this.$emit("change", e.target.checked); this.$parent.$emit("validate"); // 通知FormItem执行校验 } } }; </script> ``` - **注意**: `CheckBox`组件也需要通知父组件执行校验逻辑。 3. **`FormItem`组件实现**: ```html <template> <div class="formItem-wrapper"> <div class="content"> <label v-if="label" :style="{width: labelWidth}">{{ label }}：</label> <slot></slot> </div> <p v-if="errorMessage" class="errorStyle">{{ errorMessage }}</p> </div> </template> <script> import Schema from 'async-validator'; export default { inject: ["formModel"], props: { label: { type: String, default: '' }, // 其他props... }, data() { return { errorMessage: '', // 其他数据... }; }, methods: { validateField() { // 执行校验逻辑 const { value } = this.formModel; const rule = this.formModel.rules[this.prop]; // 获取当前字段的校验规则 const schema = new Schema({ [this.prop]: rule }); schema.validate({ [this.prop]: value }, errors => { if (errors) { this.errorMessage = errors[0].message; } else { this.errorMessage = ''; } }); }, // 其他方法... }, watch: { 'formModel.value': { handler() { this.validateField(); }, immediate: true } } }; </script> ``` - **注意**: `FormItem`组件通过监听`formModel.value`的变化来自动触发校验，确保数据的实时有效性。 - **校验规则**: 使用`async-validator`库来定义和执行校验规则。 #### 四、代码优化建议 1. **改进Input组件与FormItem组件之间的通信**: - 可以考虑使用自定义事件而不是直接访问`this.$parent`，这将使得组件间的通信更加灵活和健壮。 2. **FormItem组件中的校验逻辑**: - 在实际项目中，可以考虑使用更强大的验证库，如`async-validator`，并将其集成到`FormItem`组件中，这样可以方便地处理各种复杂的校验场景。 3. **动态获取校验字段**: - 为了使`FormItem`组件能够正确地识别当前校验的是哪个字段，可以通过`prop`属性来指定字段名，然后在`FormItem`组件中使用该名称来从`Form`组件传递过来的规则(`rules`)中获取相应的校验规则。 #### 五、总结本文通过详细的代码示例和解析，展示了如何使用Vue来模仿ElementUI的表单组件。通过对每个组件的职责划分和实现细节的深入理解，可以帮助开发者更好地设计和构建自己的表单系统。通过遵循上述指南，你可以创建出既美观又实用的表单界面。

这段代码是Vue组件中的一个watch选项，用于监听数据的变化并做出相应的响应。具体来说，该watch选项监听了两个属性：memberKey和choosePeopleKey。当memberKey属性的值发生变化时，将新值赋给choosePeopleKey属性；当choosePeopleKey属性的值发生变化时，会触发change事件并将新值作为参数传递给父组件。需要注意的是，该代码可能还依赖于一些其他的组件或数据，需要结合上下文来理解。

阅读全文