다른 분들을 위해서 V라인을 많이 준비해 주셨어요.
새 기능을 사용하는 방법은 여기를 참조하십시오.
한 마디로 하면 여러 개의 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 multiplev-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모델을 구현하는 방법입니다.
읽어주셔서 감사합니다!!😉
Reference
이 문제에 관하여(다른 분들을 위해서 V라인을 많이 준비해 주셨어요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/michaelolof_/multiple-v-model-for-the-rest-of-us-1pb8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)