{{ num }} 이 아래에 들어가 있을때에는 노출이 안됩니다...

Question

{{ num }}이 위에 있을시에는 {{ num }} 이 보이게 되고 num 값 10이 표출이 되고 아래 있을시에는 num 값이 노출이 안됩니다. app-content에서 this.num으로 제어를 하고 있기는 하지만 아래에 있다고 해서 노출이 안되는 이유가 이해가 안됩니다...

captain · Answer

안녕하세요, <app-content> 태그 하위에 오는 내용이 모두 컴포넌트 내용이 되기 때문에 그렇습니다. app-content 태그 하위 요소로 오지 않고 DOM 트리 구조상 옆이나 상위 요소로 오면 컴포넌트에서 해당 내용을 인식할 수가 없어요 :)

communityai8509 · Answer

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

{{ num }} 이 <app-content> 아래에 들어가 있을때에는 노출이 안됩니다...