用Vue 3封装Input组件和统一表单数据，提高开发效率

2024-01-25 12:43:48

前言

在现代前端开发中，组件化思想已成为主流。组件封装可以帮助我们提高代码的可维护性，重用性，方便项目代码管理，同时也可以提高我们的开发效率。

封装Input组件

创建组件文件

在 Vue 项目中，创建一个名为 InputComponent.vue 的文件。

<template>
  <input :type="type" :placeholder="placeholder" v-model="value" />
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: 'text'
    },
    placeholder: {
      type: String,
      default: ''
    },
    value: {
      type: [String, Number],
      default: ''
    }
  }
}
</script>

在这个组件中，我们定义了三个属性：type、placeholder 和 value。type 属性指定输入框的类型，placeholder 属性指定输入框的占位符，value 属性用于双向数据绑定。

使用组件

在父组件中，我们可以通过以下方式使用这个组件：

<template>
  <InputComponent type="text" placeholder="请输入姓名" v-model="name" />
</template>

<script>
import InputComponent from './InputComponent.vue'

export default {
  components: {
    InputComponent
  },
  data() {
    return {
      name: ''
    }
  }
}
</script>

通过这种方式，我们就可以在父组件中使用 InputComponent 组件。

统一表单数据

在 Vue 项目中，我们经常需要处理表单数据。为了使表单数据的管理更加方便，我们可以使用 Vuex 来统一管理表单数据。

在 Vuex 中创建 store

在 Vuex store 中，我们可以创建一个名为 form 的模块来管理表单数据。

const store = new Vuex.Store({
  modules: {
    form: {
      state: {
        name: ''
      },
      mutations: {
        setName(state, payload) {
          state.name = payload
        }
      }
    }
  }
})

在这个模块中，我们定义了一个名为 name 的状态，用于存储表单数据的姓名。我们还定义了一个名为 setName 的 mutation，用于修改表单数据的姓名。

在组件中使用 Vuex

在组件中，我们可以通过以下方式使用 Vuex：

import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState('form', ['name'])
  },
  methods: {
    ...mapMutations('form', ['setName'])
  }
}

通过这种方式，我们就可以在组件中使用 Vuex store 中的数据和方法。