vue3에서 입력 구성 요소 및 통합 양식 데이터를 캡슐화하는 방법

준비

vue create example를 사용하여 프로젝트를 생성하세요. 매개변수는 대략 다음과 같습니다: vue create example创建项目，参数大概如下：

用原生 input

原生的 input，主要是 value 和 change，数据在 change 的时候需要同步。

App.tsx如下：

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>
    );
  },
};

封装 Input

封装 input 的好处，直接传值，减少逻辑，不再需要额外的e.target

기본 입력 사용

기본 입력, 주로 값과 변경, 변경 시 데이터를 동기화해야 합니다.

App.tsx는 다음과 같습니다.

// 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} />;
  },
});

입력 캡슐화

입력 캡슐화의 이점은 직접 값 전송, 논리 감소, 추가 e.target 필요 없음, 나중에 지속적인 캡슐화 준비 등이 있습니다. .

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>
    );
  },
};

입력 구성 요소를 사용하세요

/* 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 };
}

양식 데이터를 캡슐화합니다

🎜양식 데이터를 할당하고 가져와야 하는 경우가 많습니다. 이는 클래스를 사용하여 균일하게 처리할 수 있으므로 후속 구성 요소에 속성을 할당할 때 매우 편리합니다. 🎜🎜useForm의 핵심은 속성에 액세스할 때 필드 데이터를 반환하는 프록시이며, 이는 양식 구성 요소에서 간단하게 사용할 수 있습니다. 🎜

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>
    );
  },
};

🎜양식 데이터 사용🎜🎜양식에 맞게 구성 요소를 입력하면 효과가 놀랍습니다. 🎜rrreee🎜🎜🎜

위 내용은 vue3에서 입력 구성 요소 및 통합 양식 데이터를 캡슐화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!