javascript - Vue.js 마스터에게 조언을 구하세요. 하위 구성 요소 props의 문자열 데이터는 데이터 아래의 상위 구성 요소가 변경되어도 변경되지 않습니다.
習慣沉默
習慣沉默 2017-05-19 10:28:49
0
3
691

다음 공식 코드는 상위 구성 요소가 입력 값을 변경하면 하위 구성 요소의 스팬 태그 텍스트가 변경됩니다.

으아아아

브라우저 효과

다음으로 하위 구성 요소에 데이터 속성을 추가하고 <span> 태그에 바인딩된 필드를 {{msg}}로 변경했습니다. 이제 외부에 값을 입력한 후 하위 구성 요소의 <span> 변경되지 않습니다. 왜 그렇습니까?

으아아아

브라우저 효과

데이터 속성의 배열과 객체는 변경 사항을 따를 수 있지만 문자열은 따를 수 없습니다. 그러나 계산된 속성을 대신 사용하면 문자열이 변경 사항을 따를 수 있습니다.

실례합니다. Vue 마스터 여러분, 제가 코드를 잘못 썼나요? 아니면 어떤 이유에서인지.

習慣沉默
習慣沉默

모든 응답(3)
PHPzhong

공식 vue 문서의 의미를 잘못 이해하셨습니다. 귀하의 접근 방식은 데이터의 msg가 prop의 초기 값만 얻을 수 있게 하므로 prop의 변경은 문서의 이 섹션을 참조하세요. 작성 방법에 따르면 msg는 나중에 로컬 변수로 사용되는 prop에서 초기 값을 가져옵니다. prop을 수정해도 이 로컬 변수의 값은 변경되지 않습니다. 원하는 효과를 얻으려면 계산하거나 $watch하면 됩니다.

PHPzhong

상위 구성 요소는 하위 구성 요소에 메시지를 전달합니다.
하위 구성 요소는 자체 데이터 속성의 msg에 msg 매개 변수를 할당합니다.
그런 다음 {{msg}}는 상위 구성 요소가 아닌 자체 메시지를 바인딩합니다.
다음을 사용하는 것과 같습니다. 상위 구성 요소의 메시지는 자체 메시지를 초기화합니다

{{myMessage}}로 변경해야 합니다

滿天的星座

데이터에 동일한 이름의 속성을 정의하면 충돌이 발생합니다.

으아악

메소드는 상위 컴포넌트에서 props를 얻을 수 있을 뿐만 아니라 현재 컴포넌트에 정의된 데이터도 얻을 수 있습니다. 이는 Vue에 혼란을 야기할 수 있습니다. 따라서 원하는 경우 props와 동일한 이름을 가진 속성을 반복적으로 정의하지 마세요. 사용하시려면 이렇게 쓰시면 됩니다

으아악

그런 다음 하위 구성 요소에 defaultValue

를 사용하세요.
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿