사용자 지정 구성 요소에 사용할 경우 v-model과 .sync의 차이점

사용자 지정 구성 요소에 사용할 경우 v-model과 .sync의 차이점

구성 요소에 사용되는 v-model과 .sync의 차이점을 이해할 수 없다.

<my-component v-model="myVar">

V-모델은 변수(myVar)를 구성요소 속성 '값'에 바인딩하고 구성 요소에서 방출되는 '입력' 이벤트를 청취하여 변수 'myVar'를 업데이트하기 위한 속기다.

<my-component v-bind:prop1.sync="myVar">

.sync는 변수(myVar)를 구성 요소 속성에 바인딩하고(이 경우 prop1') 구성 요소에서 방출되는 'update:prop1' 이벤트를 청취하여 'myVar' 변수를 업데이트하기 위한 속기다.

기본적으로 v-model은 '값' 속성 및 '입력' 이벤트와만 작동하지만 그마저도 구성 요소의 '모델' 옵션을 사용하여 사용자 지정할 수 있다는 것을 알고 있다.

누군가 나에게 차이점이나 언제 무엇을 사용해야 하는지 설명해 준다면 좋을 것이다.

다음은 1) 수동 바인딩 + 이벤트 수신 2) .sync 3) v-model의 세 가지 다른 방법으로 동일한 구성 요소를 사용한 예입니다.

Vue.js 2의 경우 두 가지 모두 거의 동일한 작업을 수행한다. 단, 양방향 바인딩 사용.sync더 다재다능하다.v-model을 구성 요소에 추가한 후 추가되었다. .sync둘 이상의 받침대에 v-모델 로직을 사용할 수 있도록 허용한다.비교해보자:

• .sync

<comp :value.sync="username" :age.sync="userAge" />

다음 항목으로 확장:

<comp :value="username" :age="userAge" @update:name="val => userName = val" @update:age="val => userAge = val" />

• v-model

<comp v-model="userName" />

다음 항목으로 확장:

<comp :value="username" @input="val => username = val" />

우리가 볼 수 있는 차이점은 다음과 같다.

• 기본 소품명v-model항상 부르는 재산에 속박된다.value

• .sync여러 소품 사용 가능

• 구성 요소에서 방출되는 이벤트 이름(@update을 위해.sync그리고@input을 위해v-model)

의 매우 흥미로운 특징 중 하나.sync물체를 특별 취급하는 것이다.그.sync개체에 사용할 때 한정자가 한 번에 여러 개의 소품을 설정함(여기서 더 이상)

어떤 걸 쓰시겠습니까?그것은 속성을 사용하는 표준 패턴이다.value구성 요소의 키 값 캐리어로서.이 상황에서 만약 있다면value속성, 2-way 바인딩을 활성화한 후 사용v-model. 다른 모든 경우 사용.sync

큰 차이가 없기 때문에 Vue 3에서 잠재적으로 이들을 병합할 계획이 있다.

https://github.com/vuejs/rfcs/pull/8

구성 요소에 양방향 바인딩의 자연적인 후보가 있는 경우v-model그래서 텍스트 입력, 확인란 등은 모두v-model마찬가지로 선택 개념을 가진 구성요소의 맥락에서 타당할 수 있다.당신은 사용할 수 있다.sync대신에 그것은 일반적으로 다른 개발자들이 기대하는 것이 아니다.

Vue 2에서는 단 하나의 소품/이벤트만 연결할 수 있음v-model하려면 를 여러 소품/이벤트에 대해 양방향 바인딩을 사용하려면sync.

Vuetify에는 두 가지 구성 요소를 모두 사용하는 몇 가지 예가 포함되어 있다.v-model그리고sync예를 들어,v-autocomplete:

https://vuetifyjs.com/en/components/autocompletes

이것은 사용한다.v-model선택한 값에 대해 사용하지만sync을 위해error그리고search-input.

참조URL: https://stackoverflow.com/questions/57947757/what-is-the-difference-between-v-model-and-sync-when-used-on-a-custom-component