Bagaimana untuk merangkum komponen input dan data borang bersatu dalam vue3

Kerja penyediaan

Buat projek dengan vue create example, parameternya adalah seperti berikut:

Gunakan input asli

asli input, Terutamanya nilai dan perubahan, data perlu disegerakkan apabila menukar.

App.tsx adalah seperti berikut:

import { ref } from 'vue';

export default {
  setup() {
    // username就是数据
    const username = ref('张三');
    // 输入框变化的时候，同步数据
    const onInput = ;
    return () => (
      <div>
        <input type="text"
            value={username.value}
            onInput={(e: any) => { username.value = e.target.value; }} />
        <div>input的值：{username.value}</div>
      </div>
    );
  },
};

Encapsulate Input

Kelebihan mengekapsulkan input ialah ia boleh menghantar nilai secara langsung, mengurangkan logik, dan tiada tambahan e.target diperlukan untuk yang berikut Teruskan membuat persediaan untuk pembungkusan.

// Input.tsx
import { defineComponent, ref } from 'vue';

// defineComponent定义组件，有props
const Input = defineComponent({
  props: {
    value: {
      required: true,
      type: String,
    },
    onChange: {
      required: true,
      type: Function,
    },
  },
  // 渲染用到props，需要在这里传参
  setup(props) {
    // 值变化 的时候  调用传过来的onChange从而同步父组件的 数据
    const onInput = (e: any) => {
      props.onChange && props.onChange(e.target.value);
    };
    return () => <input type="text" value={props.value} onInput={onInput} />;
  },
});

Gunakan komponen Input

import { ref } from 'vue';
import Input from './components/Input';
export default {
  setup() {
    // 数据
    const username: any = ref('张三');
    return () => (
      <div>
        {/* 使用组件，传value和onChange */}
        <Input
          value={username.value}
          onChange={(value: string) => (username.value = value)} // 直接在这同步数据
        />
        <div>input的值：{username.value}</div>
      </div>
    );
  },
};

untuk merangkum data borang

Data borang selalunya perlu menetapkan dan mendapatkan nilai Di sini anda boleh menggunakan kelas untuk mengendalikannya secara seragam dan menetapkan atribut kepada komponen seterusnya.

Intipati useForm ialah proksi, yang mengembalikan data medan apabila mengakses atribut, yang boleh digunakan hanya dalam komponen borang.

/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
/* eslint-disable @typescript-eslint/no-explicit-any */
import { ref, Ref } from "vue";
export class FormData<T> {
  private data: Ref<any>;
  constructor(data: T) {
    this.data = ref(data || null);
  }

  // 设置某个字段的值
  setValue(name: string, val: any): void {
    const next = { ...this.data.value, [name]: val };
    this.data.value = next;
  }

  // 获取某个字段的值
  getValue(name: string): any {
    return this.data.value[name];
  }

  // 获取整个值
  getValues() {
    return this.data.value;
  }

  // 设置整个值
  setValues(values: T) {
    this.data.value = values;
  }

  // 获取field，字段和字段的修改事件
  getField(name: string) {
    return {
      value: this.data.value[name],
      onChange: (v: any) => {
        this.setValue(name, v);
      },
    };
  }
}

type FormDataProxy<T> = {
  [P in keyof T]: T[P];
};

export function useForm<T extends Record<string, any>>(data: T) {
  const form = new FormData(data);
  const ver = ref(0);

  const proxy = new Proxy(form, {
    // 写proxy的目的是：form.username的时候，直接返回 form.getField(username)
    get(target, name) {
      switch (name) {
        case "getValues":
          return form.getValues.bind(form);
        case "setValues":
          return form.setValues.bind(form);
        default:
          return form.getField(name as string);
      }
    },
    // 写form.username = xx  直接返回 form.setValue(&#39;username&#39;,xx)
    set(target, name, value) {
      switch (name) {
        case "getValues":
        case "setValues":
          break;
        default:
          form.setValue(name as string, value);
      }
      return true;
    },
  }) as any as FormDataProxy<T> & {
    setValues: (val: T) => void;
    getValues: () => Ref<T>;
  };
  return { form: proxy, ver };
}

Menggunakan data borang

Komponen Input berfungsi dengan baik dengan borang.

import Input from './components/Input';
import { useForm } from './hooks/useForm';

// 使用组件
export default {
  setup() {
    // 数据
    const { form, ver } = useForm({ username: '张三', age: 33 });
    console.log(123, form, ver);
    return () => (
      <div>
        {/* 这里的form.username，实际是proxy返回的{value:xxx,onChange:fn} */}
        {/*  多表单组件的时候 这样就非常方便了 */}
        <Input {...form.username} />
        <Input {...form.age} />

        <button
          onClick={() => {
            console.log(form.getValues());
          }}
        >
          提交
        </button>
      </div>
    );
  },
};

Atas ialah kandungan terperinci Bagaimana untuk merangkum komponen input dan data borang bersatu dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!