<p>우리는 typescript를 사용하여 녹아웃에서 vue 3 구성 API로 점진적으로 이동하기로 결정했으며, props 변경에 대한 안티 패턴을 이해하려고 노력하고 있습니다. 의도한 작업을 수행하는 작업 구성 요소가 있지만 기본적으로 작성 방식이 권장되는 접근 방식인지 확인하고 싶습니다. </p> <p>매우 간단한 예는 토글이 있는 체크박스 목록 구성요소입니다. </p> <p>가장 큰 질문은 AppList.vue에서 수행 중인 작업이 올바른지 확인하기 위해 <code>const InternalModel = toRef(props.selected ?? []);</code> 구성 요소 및 <code>selectedHandler</code> - 이벤트 및 <code>toggleAll</code>에서 OUT을 방출하도록 평가하지만 여기서는 <code>selected</code> ;내부 모델 동기화. 동일한 것에 대해 두 개의 변수를 사용하는 것은 번거롭게 느껴지지만 동시에 내부 모델이 뷰를 방해할 필요가 없기 때문에 의미가 있습니다. </p> <p>vuejs.org에 <code>v-model</code>의 배열을 사용하여 여러 확인란을 나타낼 수 있는 예가 있다는 것을 알고 있지만 구성요소 내부나 소품이 아니기 때문에 똑같지는 않고 좀 더 복잡하게 느껴집니다. 나는 하루 종일 문제를 해결하려고 노력했지만 vue 3 검색 결과가 많지 않았고 이 특정 문제에 대한 결과를 전혀 찾지 못했습니다. </p> <p>HomeView.vue:</p> <p> <pre class="brush:html;toolbar:false;"><스크립트 세트 lang="ts"> 'vue'에서 { ref } 가져오기; AppList를 가져오고, '@/comComponents/AppList.vue'에서 { type Item }; const fooItems = ref<Item[]>([ { ID: 1, 이름: 'foo 1' }, { ID: 2, 이름: 'foo 2' }, { ID: 3, 이름: 'foo 3' }, { ID: 4, 이름: 'foo 4' }, { ID: 5, 이름: 'foo 5' }, ]); const fooSelected = ref<number[]>([]); </스크립트> <템플릿> <AppList :items="fooItems" v-model:selected="fooSelected"></AppList> <div>fooselected: {{ fooSelected }}</div> </템플릿></pre> </p> <p>组件/Applist.vue：</p> <p> <pre class="brush:html;toolbar:false;"><스크립트 설정 lang="ts"> 'vue'에서 { 계산, toRef } 가져오기; 내보내기 인터페이스 항목 { ID 번호; 이름: 문자열; } const props = 정의Props<{ 항목: 항목[]; 선택됨?: 숫자[]; }>(); const InternalModel = toRef(props.selected ?? []); const 방출 = 정의Emits<{ '업데이트:선택됨': [선택됨: 번호[]]; }>(); const selectedHandler = (e: 이벤트) => { const target = <HTMLInputElement>e.target; if(props.selected &&target) { if (target.checked) { Emit('update:selected', [...props.selected, Number(target.value)]); } 또 다른 { 방출( '업데이트:선택됨', props.selected.filter((i: number) => i !== Number(target.value)) ); } } }; const 토글All = 계산됨({ 가져오기: () => InternalModel.value.length === props.items.length && InternalModel.value.every((s) => props.items.map((item) => item.id).includes(s)), 설정: (값) => { if (값) { 방출( '업데이트:선택됨', props.items.map((i) => i.id) ); InternalModel.value = props.items.map((i) => i.id); } 또 다른 { Emit('업데이트:선택됨', []); 내부모델.값 = []; } }, }); </스크립트> <템플릿> <라벨> <input type="checkbox" v-model="toggleAll" /> 모두 전환 </라벨>

<li v-for="item in items" :key="item.id"> <라벨> <input type="checkbox" :value="item.id" v-model="internalModel" @change="selectedHandler" /> <span>id {{ item.name }}</span> </라벨> </li> </ul> 내부 모델: {{ 내부 모델 }} </템플릿></pre> </p>