Props 2

Vue.js 시작하기 11. 싱글컴포넌트 사용하여 개발 시작하기

App.vue 파일을 활용해서 한번 화면에 데이터를 뿌려보도록 하자. 기존에 html 소스 안에서 뷰 인스턴스를 생성했던 방법과는 아주 조금 다르다. 코드를 통해 알아보자 {{str}} #1. 싱글 파일 컴포넌트에서 html 을 선언할 때는, 가장 상위에 div 태그를 하나 선언하고 , 그 안에 header던, body던 생성을 해줘야 한다. #2. 기존에 html 파일에서 뷰 인스턴스 객체를 선언하고 주입해주었던 방식 #3. 싱글파일 컴포넌트에서는 이런식으로 변수를 선언해주면 안되고 #4. 방식으로 선언을 해주어야 한다. 그 이유는, 여러 객체들의 재사용성을 높이기 위함으로 변수를 함수형으로 선언하고 , 해당 값을 리턴해주는 형태로 사용한다. #싱글파일 컴포넌트 체계에서 컴포넌트 등록하기 컴포넌트를 등..

Study/Vue 2022.01.22

Vue.js 시작하기 05. 컴포넌트 레벨 간의 통신 방법

위에서 아래로는 프롭스, 아래서 위로는 이벤트를 발생시켜 컴포넌트간에 통신을 했다. 그러면 같은 레벨의 컴포넌트 사이에 통신은 어떤식으로 이루어질까? - Root - AppHeader - AppContent 이런식의 레벨 구조를 가진 컴포넌트일 때, AppHeader 컴포넌트와, AppContent간의 통신을 구현해보자 데이터 통신의 방식은 다음과 같다. 1. AppContent에서 Root로 event로 데이터 전달 2. Root에서 AppHeader로 데이터 전달 결과물은 다음과 같다. 1. AppHeader의 propsData에 값이 잘 들어감 2. Root의 데이터에도 값이 잘 들어감 해당 포스팅은 인프런의 Vue.js 시작하기 - Age of Vue.js 학습 후 정리한 내용임을 알려드립니다.

Study/Vue 2022.01.19