Vue 3는 구성 요소 소품의 반응성을 제거합니다.

Question

EditTransaction 구성 요소가 있고 다음과 같이 호출합니다.

으아아아

보시다시피 그 안에 거래 객체를 보내고 있어요. 이것은 편집자이므로 트랜잭션 개체가 반응하는 것을 원하지 않습니다. 누군가가 편집기를 닫으면 수정된 트랜잭션 개체가 아닌 원래 트랜잭션 개체를 원하므로 내가 옳고 프록시를 제거하고 싶다면 편집기에 넣겠습니다.

으아아아

편집기 템플릿 내부에는 v-model 값이 양식 개체에 바인딩된 일부 자산 구성 요소가 있습니다

으아아아

문제는 트랜잭션 이름을 변경하면 양식 개체도 변경되고 트랜잭션 속성도 변경된다는 것입니다. 따라서 트랜잭션 속성이 반응적이므로 상위 데이터의 이름도 변경됩니다. 내가 뭘 잘못하고 있는 걸까요? 아니면 위임자 없이 소품 값을 사용하여 구성 요소 생성 시 값이 채워지는 양식 개체를 어떻게 구현할 수 있나요?

Answer 1

props를 사용하여 초기 값을 하위 구성 요소의 상태에 전달하는 것이 일반적입니다. 이는 로컬 data에서 prop의 값을 "복사"했다는 의미입니다. Prop 값이 예기치 않은 변경으로부터 보호되도록 보장합니다. Vue 문서에서 자세히 알아보세요

다음은 위의 방법을 보여주는 매우 간단한 예입니다.

/your-child-Component-vue/

으아악

이제 예시를 읽어보니 양식의 일부 데이터를 업데이트하려고 하고 있으며 버튼 등을 통해 확인하지 않는 한 초기 정보를 변경하고 싶지 않다는 것을 알 수 있습니다. 이 문제를 해결하는 프로세스는 다음과 같습니다.

• 사용자가 변경할 수 있는 초기 데이터를 prop으로 전달합니다.
• 사용자가 입력 요소를 통해 일부 데이터를 변경했지만 해당 변경 사항(버튼을 통해)을 확인하지 않은 경우 데이터를 변경하지 않고 그대로 둡니다(즉, 상위 요소에 대한 변경 사항을 내보내지 않고 prop 값을 변경하지 않고 유지함을 의미)
• 사용자가 일부 데이터를 변경하고 확인하면 업데이트된 데이터를 부모(this.$emit)에게 보내 변경 사항을 알 수 있도록 합니다.

Answer 2

그래서 저는 두 가지 해결책을 찾았습니다:

으아아아

또는

으아아아

둘 다 작동합니다. 양식 값을 변경해도 소품은 변경되지 않습니다.