vue里封装form组件

在 Vue 中封装 form 组件可以让我们在开发过程中更加高效地处理表单数据，减少重复代码的编写。下面是一个简单的示例：

<template>
  <form>
    <slot></slot>
  </form>
</template>

<script>
export default {
  name: 'MyForm',
  data() {
    return {
      formData: {}
    }
  },
  methods: {
    onSubmit() {
      // 处理表单提交逻辑
      console.log(this.formData)
    }
  }
}
</script>

在上面的代码中，我们封装了一个名为 `MyForm` 的组件，它包含一个 `form` 标签和一个 `slot` 插槽。在组件内部，我们定义了一个 `formData` 对象来存储表单数据。当用户提交表单时，我们调用 `onSubmit` 方法来处理表单提交逻辑，并将 `formData` 打印到控制台上。

这个示例组件非常简单，只是一个基本的框架，可以根据实际需求进行进一步的扩展。比如可以在插槽中添加表单元素，然后通过 `v-model` 指令来绑定数据。可以在 `methods` 中添加更多的表单处理逻辑，比如表单验证等。