하위 구성요소의 v-model 재설정

Question

부모 구성 요소에는 다음과 같은 것이 있습니다.

으아악

내 자식 구성 요소는 다음과 같습니다.

으아악

clearUI가 상위에서 트리거되고 formData가 재설정되면 ProductCounter의 v 모델이 다시 0으로 반영되어야 한다고 예상했는데 그렇지 않습니다. 어디서 잘못되었나요?

Answer 1

라이브 솔루션 링크

다음에는 https://play.vuejs.org/에서 최소한으로 재현 가능한 예제를 준비해주세요. 질문:

Vue에서 반응형 변수를 덮어쓰지 마세요...

그냥 바꿔보세요Object.assign(formData,initialFormData):

또한 구성 요소 속성을 역참조하지 마세요. const value = ref(props.modelValue). 이러한 속성은 원래 값을 복사하기 때문에 반응성을 잃습니다.

생성v-model 模式的最佳方法是使用计算하고 템플릿에서 직접 조작할 수 있습니다.

으아악

또한 count 속성은 문자열이 아닌 숫자여야 합니다(Vue 경고가 표시됩니다):

으아악

또한 업데이트가 필요하지 않습니다. input 事件上的 prop，因为您已经在 上使用 v-model >. 또한 입력 모델을 숫자로 변환해야 합니다:

으아악

그래서 당신은: 지원서 보기

으아악

ProductCounter.vue:

으아악