Vue 3 Composition API: 값이 False인 경우에도 Props 및 v-if 렌더링

Question

여기서 정말 이해가 안 되는 문제가 발생했습니다. true 또는 false로 설정할 수 있는 "active"라는 prop이 전달되는 하위 구성 요소를 포함합니다. "true"가 전달되면 구성 요소의 일부가 표시되고 "false"가 전달되면 구성 요소가 표시되지 않는다는 개념입니다.

제가 이해한 바에 따르면 다음과 같이 소품 이름만 사용할 수 있습니다.

으아아아

문제는 위 명령문의 v-if를 직접 true 또는 false로 설정하면 예상대로 작동한다는 것입니다. 이를 prop으로 전달하면 true이든 false이든 항상 표시됩니다.

활성(아무것도 표시하지 않음):

으아아아

잘못됨(active 값에 관계없이 div의 콘텐츠가 표시됨):

으아아아

왜 이런 일이 일어나는 걸까요? false 값이 전달되었지만 값이 false임에도 불구하고 여전히 렌더링되는 "active" 값을 표시하여 이를 확인했습니다. 여기서 뭔가 빠졌나요? 나는 따옴표 없이 따옴표를 사용하여 ref를 사용하여 로컬 값을 전달하고 이를 사용해 보았습니다.

으아아아

이것도 작동하지 않았습니다.

Answer 1

내보내기 기본값에서

으아악

구성 요소 템플릿에서

으아악

컴포넌트를 사용할 때 활성 요소를 false로 바인딩하세요

으아악

Answer 2

그 이유는 prop이 상위 구성 요소에서 전달된 문자열이기 때문입니다(다른 HTML 속성의 기본 동작과 동일). prop을 부울로 전달하려면 문자열 대신 v-bind语法或:简写，这样false JavaScript 표현식 으로 구문 분석되는 을 사용해야 합니다.

으아아아

또는

으아아아