다른 분들을 위해서 V라인을 많이 준비해 주셨어요.

Vue 3이 등장한 지 1분이 지났습니다. 제가 가장 좋아하는 기능 중 하나는 사용자 정의 구성 요소에 여러 개의 v-model 연결을 추가하는 것입니다.
새 기능을 사용하는 방법은 여기를 참조하십시오.
한 마디로 하면 여러 개의 v형 모델을 사용하면 다음과 같은 사용자 정의 구성 요소를 만들 수 있다.

<CustomMultipleInput 
  v-model:title="heading"
  v-model:subHeading="pageSubHeading"
/>

이 장점은 흔하지만 복잡한 구성 요소를 추상화하고 관심 있는 특정 부분에 연결할 수 있다는 것이다.
이거 좋네.그런데 Vue 2는요?
모든 사람이 Vue 3로 쉽게 업그레이드할 수 있는 것은 아닙니다.
내가 자주 만나는 고전적이지만 간단한 예는 기본 SelectInput 구성 요소를 구축하는 것이다. 이 구성 요소는 아주 적은 가설을 하기만 하면 모든 종류의 선택 옵션과 텍스트 입력을 연결할 수 있다.
어디 보자.
SelectInput 구성 요소의 맨 아래쪽은 다음과 같습니다.

그것은 단지 선택과 입력 요소의 혼합일 뿐이다.
위의 그림의 코드는 아마 이와 같을 것이다.SelectInput.vue

<template>
  <div class="select-input">
    <select class="select-input__select">
      <slot />
    </select>
    <input class="select-input__input" />
  </div>
</template>

<style>
.select-input {
  border: solid 1px #e2e2e2;
  max-width: 250px;
  font-size: 14px;
  padding: 5px 6px;
}

.select-input__select {
  border: none;
  background: none;
  max-width: 69px;
}

.select-input__input {
  border: none;
  width: 180px;
  border: none;
  outline: none;
}
</style>

가장 복잡한 부분은 아니다.하지만 실제 세계의 용례를 설명하는 데 도움이 된다.

물체를 발사하다
vue2에서 복잡한 구성 요소를 처리할 때 귀속할 필드를 포함하는 자바스크립트 대상을 보내는 것이 유행입니다.
이런 거.SelectInput.vue

<template>
  <div class="select-input">
    <select v-model="value.select" @change="emit" class="select-input__select">
      <slot />
    </select>
    <input v-model="value.input" @input="emit" class="select-input__input" />
  </div>
</template>

<script>
export default {
  model: {
    prop: "value",
    event: "change"
  },

  props: {
    value: {
      type: Object,
      default: () => ({
        select: undefined,
        input: undefined,
      }),
    },
  },

  methods: {
    emit() {
      this.$emit('change', this.value);
    }
  },
};
</script>

여기서 우리는 Vue가 직접 변이 대상의 속성 필드를 허용함으로써 빠른 양방향 귀속 구성 요소를 실현할 수 있다는 사실을 이용했다.
간단하고 사용하기 쉽다. (생산에서 이 코드를 사용하지 마라.)🌚).
사용자 정의 구성 요소는 현재 다음과 같은 방식으로 사용할 수 있습니다.
구성 요소 내의 변경 사항은 응용 프로그램에 반영됩니다.vue와 응용 프로그램에서 변경된 내용입니다.vue가 구성 요소에 반영됩니다.App.vue

<template>
  <SelectInput v-model="amount">
    <option value="NGN">NGN</option>
    <option value="GHS">GHS</option>
    <option value="USD">USD</option>
  </SelectInput>
</template>

<script>
export default {
  data () {
    return {
      amount: {
        select: "NGN",
        input: 0,
      }
    }
  }
}
</script>

이 기능은 복잡한 구성 요소, 폼 등을 추상화하고 필요한 부분만 대상의 필드로 보내는 데 도움을 줍니다.
이런 방법의 단점 중 하나는 그것이 매우 약할 수 있다는 것이다.SelectInput 구성 요소는 amount 객체의 구조를 지정해야 합니다.만약 우리가 SelectInput 구성 요소가 적응할 수 없는 방식으로 그것에 대해 변이를 한다면, 우리는 그것을 파괴하기 쉽다.
이것은 우리가 대상 구조를 추적하고 유지해야 한다는 것을 의미하기 때문에 코드의 가독성이 떨어질 수 있다. (특히 비교적 큰 대상에 대해서는)

Vue2 다중 V-유형
하나의 솔루션!!!🕺🏻
내가 이 라이브러리를 쓴 것은 바로 이런 문제들을 해결하기 위해서이다.https://github.com/michaelolof/vue2-multiple-vmodels
일단 설치하자!

$ npm install --save vue2-multiple-vmodels

import Vue from "vue";
import Vue2MultipleVModels from "vue2-multiple-vmodels";

Vue.use(Vue2MultipleVModels);

이 라이브러리에는 두 개의 유용한 vue 명령이 첨부되어 있다.

v-model-destruct

v-models

v-model-destruct를 사용하여 v-model 대상 해체
앞의 예시를 고려하여 우리는 그 중에서 대상을 발사했다.
대상이 훨씬 복잡한데, 대상 중의 한 필드만 흥미를 가지면 어떻게 해야 합니까?SelectInput 구성 요소에서 금액 필드만 관심 있으면 어떻게 합니까?

With v-model-destruct you can destruct an incoming v-model object and bind only to the fields you're interested in.

그래서 App.vue에서 우리는 쓸 수 있다...

<template>
  <SelectInput v-model-destruct:input="amount">
    <option value="NGN">NGN</option>
    <option value="GHS">GHS</option>
    <option value="USD">USD</option>
  </SelectInput>
</template>

<script>
export default {
  data () {
    return {
      amount: 300,
    }
  }
}
</script>

위의 코드 세션에서 우리는 v-모델 대상과 귀속(양방향 귀속)을 없애고 v-모델 대상의 입력 필드만 amount 변수에 귀속시키고 있습니다.
마찬가지로 우리는 select 필드를 currency 변수에 특정한 귀속시킬 수 있다. 예를 들어

<template>
  <SelectInput v-model-destruct:select="currency" v-model-destruct:input="amount">
    <option value="NGN">NGN</option>
    <option value="GHS">GHS</option>
    <option value="USD">USD</option>
  </SelectInput>
</template>

<script>
export default {
  data () {
    return {
      currency: "GHS",
      amount: 300,
    }
  }
}
</script>

다중 V-밴드v-models앞의 예v-model-destruct는 발사 대상에 사용되는 기존 부품에 매우 적합하다.그러나 그것은 진정한 다중v-model 선택이 아니다.

The v-models directive simply put is my Vue2 response to the new multiple v-model feature in Vue 3.

그것이 어떻게 일을 하는지 우리에게 보여 주시오.
같은 SelectInput.vue 구성 요소를 사용하면 우리는 우리의 구성 요소를 설계하여 지원할 수 있다v-models는 다음과 같다.SelectInput.vue

<template>
  <div class="select-input">
    <select v-model="select" class="select-input__select">
      <slot />
    </select>
    <input v-model="input" class="select-input__input" />
  </div>
</template>

<script>
export default {
  models: [
    { data: "select", event: "models:select" },
    { data: "input", event: "models:input" },
  ],
  data() {
    return {
      select: undefined,
      input: "",
    }
  },
  watch: {
    select(newVal) {
      this.$emit("models:select", newVal);
    },
    input(newVal) {
      this.$emit("models:input", newVal);
    },
  },
}
</script>

이 구성 요소의 구조는 앞의 예시와 매우 다르지만 매우 간단하다.

우리는 선택과 입력 요소를 정의하고 각각 데이터 필드를 연결했다.

그리고 우리는 데이터 필드가 바뀌면 models:<xxx> 이벤트를 보낼 것이라고 말했다.이 기능이 정상적으로 작동하려면 이벤트 앞에 models: 접두사를 붙여야 합니다.명령은 그것을 검사할 것이다.

그리고 models 부분에 데이터 필드와 보낸 이벤트를 등록합니다.

이렇게!!
이것이 바로 App.vue 구성 요소가 이 명령을 사용할 때의 모습입니다.App.vue

<template>
  <SelectInput v-models:select="currency" v-models:input="amount">
    <option value="NGN">NGN</option>
    <option value="GHS">GHS</option>
    <option value="USD">USD</option>
  </SelectInput>
</template>

<script>
export default {
  data () {
    return {
      currency: "GHS",
      amount: 300,
    }
  }
}
</script>

보시다시피, 우리는 구성 요소에 어떤 도구도 정의하지 않았고, 구성 요소에 어떤 도구도 전달하지 않았습니다.v-models 명령은 도구 없이 작동할 수 있다.아이템을 정의하고 아이템이 변할 때 데이터 필드를 업데이트할 수 있지만 v-models 아이템에 의존하지 않습니다.
그것은 데이터에 의존한다.도구는 변할 수 없기 때문이다.
우리는 일반 v형models이 아닌 model의 진열 부분을 하나 더 가지고 있다.여기에서 v-models가 처리하기를 원하는 모든 필드에 데이터와 이벤트를 정의할 수 있습니다.
앞에서 말한 바와 같이 사건은 models: 이전에 진행해야 지령이 작동할 수 있다.
이렇게
별로 초라하지 않아요?😂
이것이 Vue 2에서 여러 V모델을 구현하는 방법입니다.
읽어주셔서 감사합니다!!😉