Vue自定义Form组件实现方法介绍

下面详细讲解“Vue自定义Form组件实现方法介绍”的完整攻略。

什么是自定义Form组件？

自定义Form组件是指，开发者可以使用Vue框架中提供的组件相关API自己封装一个表单组件，以便于实现业务需求。这种自定义Form组件可以根据不同的业务需求来进行设计，而且重用率非常高，可以减少重复的代码。

实现方法

实现Vue自定义Form组件的方法如下：

1.编写组件的template

将组件所需要的DOM结构通过Vue的template属性进行编写。在这里，我们可以通过Vue提供的一些组件如input、select、radio等来实现表单的输入效果。

<template>
  <div>
    <label>{{ label }}</label>
    <input :type="type" :value="value" @input="onInput" />
  </div>
</template>

2.定义组件props

我们可以通过Vue组件中的props来定义该组件所需要的输入参数，这些参数将可以在组件使用时通过属性的方式传递。

<script>
export default {
  name: "FormInput",
  props: {
    label: String,
    type: {
      type: String,
      default: "text",
    },
    value: {},
  },
  methods: {
    onInput(event) {
      this.$emit("input", event.target.value);
    },
  },
};
</script>

3.使用组件

我们可以通过组件的名称（name）来在其他组件中使用该自定义组件。同时，该自定义组件也可以通过v-model指令与父组件进行数据双向绑定。

<template>
  <div>
    <form>
      <form-input v-model="username" label="Username"></form-input>
      <form-input v-model="password" label="Password" type="password"></form-input>
      <button @click.prevent="login">Login</button>
    </form>
    <p v-if="error">{{ error }}</p>
  </div>
</template>

<script>
import FormInput from "@/components/FormInput.vue";

export default {
  name: "LoginForm",
  components: {
    FormInput,
  },
  data() {
    return {
      username: "",
      password: "",
      error: "",
    };
  },
  methods: {
    login() {
      // ...
    },
  },
};
</script>

示例

下面通过两个示例来说明自定义Form组件的具体实现方法。

示例1：文本框组件

首先，我们需要自定义一个文本框组件，可以通过这个组件来实现任意数量、任意类型、任意样式的文本框。

<template>
  <div>
    <label>{{ label }}</label>
    <input :type="type" :class="className" :style="style" :value="value" @input="onInput" />
  </div>
</template>

<script>
export default {
  name: "MyInput",
  props: {
    type: {
      type: String,
      default: "text",
    },
    label: {
      type: String,
      default: "",
    },
    className: {
      type: String,
      default: "",
    },
    style: {
      type: Object,
      default: null,
    },
    value: {},
  },
  methods: {
    onInput(event) {
      this.$emit("input", event.target.value);
    },
  },
};
</script>

使用方式：

<template>
  <div>
    <my-input label="姓名" type="text" :value="name" @input="name = $event"></my-input>
    <my-input label="密码" type="password" :value="password" @input="password = $event"></my-input>
  </div>
</template>

<script>
import MyInput from '@/components/MyInput.vue';

export default {
  name: 'App',
  components: {
    MyInput,
  },
  data() {
    return {
      name: '',
      password: '',
    };
  },
};
</script>

示例2：复选框组件

接下来，我们需要自定义一个复选框组件，可以通过这个组件来实现多选或单选功能。

<template>
  <div>
    <label>{{ label }}：</label>
    <div>
      <label v-for="(option, index) in options" :key="index" :style="optionStyle">
        <input type="checkbox" :name="name" :value="option.value" v-model="checkedValues" />
        {{ option.text }}
      </label>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyCheckbox',
  props: {
    label: {
      type: String,
      default: '',
    },
    options: {
      type: Array,
      default: [],
    },
    name: {
      type: String,
      default: '',
    },
    optionStyle: {
      type: Object,
      default: () => {},
    },
    value: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      checkedValues: this.value,
    };
  },
  watch: {
    checkedValues(newVal) {
      this.$emit('input', newVal);
    },
  },
};
</script>

使用方式：

<template>
  <div>
    <my-checkbox label="爱好" :options="options" :value="hobbies" @input="(val) => hobbies = val"></my-checkbox>
  </div>
</template>

<script>
import MyCheckbox from '@/components/MyCheckbox.vue';

export default {
  name: 'App',
  components: {
    MyCheckbox,
  },
  data() {
    return {
      hobbies: [],
      options: [
        { text: '唱歌', value: 'sing' },
        { text: '跳舞', value: 'dance' },
        { text: '阅读', value: 'read' },
      ],
    };
  },
};
</script>

以上就是自定义Form组件实现方法的详细攻略。