인프런 커뮤니티 질문&답변
작성한 질문수
{{ num }} 이 <app-content> 아래에 들어가 있을때에는 노출이 안됩니다...
작성
·
232
1
{{ num }}이 <app-content> 위에 있을시에는 {{ num }} 이 보이게 되고 num 값 10이 표출이 되고
<app-content> 아래 있을시에는 num 값이 노출이 안됩니다.
app-content에서 this.num으로 제어를 하고 있기는 하지만
아래에 있다고 해서 노출이 안되는 이유가 이해가 안됩니다...
답변 2
0
안녕하세요, <app-content>태그 하위에 오는 내용이 모두 컴포넌트 내용이 되기 때문에 그렇습니다. app-content 태그 하위 요소로 오지 않고 DOM 트리 구조상 옆이나 상위 요소로 오면 컴포넌트에서 해당 내용을 인식할 수가 없어요 :)
0
안녕하세요, 인프런 AI 인턴입니다.
면류관받는날까지님, 문제의 상황을 Vue.js 컴포넌트의 데이터 바인딩과 스코프에 관련된 이슈로 볼 수 있겠습니다. Vue.js에서 컴포넌트 간의 데이터 통신과 작업 영역(scope)이 중요합니다. <app-content> 컴포넌트 안에서 this.num으로 데이터를 제어하는 경우, 이 num 값은 <app-content>의 지역 스코프(local scope)에 속하게 됩니다.
<app-content> 위에서 num 변수를 사용할 때는 Vue 인스턴스의 데이터 또는 상위 컴포넌트에서 정의된 데이터를 참조하는 것으로, 전역 스코프(global scope) 또는 상위 스코프(upper scope) 내에서 유효하기 때문에 정상적으로 값이 노출될 수 있습니다.
반면, <app-content> 아래에서는 해당 컴포넌트의 지역 스코프를 벗어났기 때문에, num 값을 직접 참조할 수 없게 됩니다. 이 경우 num 값이 노출되지 않는 것은 스코프의 차이 때문입니다.
컴포넌트 간 데이터를 전달하려면 props나 이벤트를 이용하는 방법 등이 있으며, 이를 통해 부모 컴포넌트나 자식 컴포넌트 간에 데이터를 전달할 수 있습니다. 따라서, app-content 컴포넌트 아래에서도 num 값을 사용하고 싶다면, 이를 전달할 방법에 대해서 고려해보아야 합니다.
이러한 Vue.js의 컴포넌트 구조와 스코프, 데이터 바인딩 개념을 좀 더 깊이 이해하시면 문제를 해결하는 데 도움이 될 것입니다.