vue 프로젝트를 생성하면
src폴더 안에 기본적으로 부모 컴포넌트인 App.vue와
components 폴더안에 자식 컴포넌트인 HelloWorld.vue가 존재한다
자식 컴포넌트는 이 components 폴더에 생성한다.
.vue 확장자로 만들고 파일명은 첫문자는 대문자로 쓰는 것이 관례이다.
template 안에 div태그 안에 출력하고자 하는 대상을 써주도록 한다
*vue create 프로젝트명 : 프로젝트 생성
yarn serve : 서버켜기
App.vue에 자식컴포넌트인 Happy.vue를 부착시키고자 한다.
App.vue
-부모컴포넌트
부착시킬 컴포넌트를 import로 불러온다
자식컴포넌트를 등록해준다
template의 div태그 안에 <Happy />로 부착시킨다
(HelloWorld 자식컴포넌트는 기본적으로 부착되어 있음)
Happy.vue
-자식컴포넌트
자신의 컴포넌트명을 지정해준다
화면에 출력시킬 글을 작성한다
결과창
App.vue에 자식컴포넌트인 HelloWorld에 매개변수를 전달하여 부착시키고자한다
App.vue
HelloWorld.vue
부모컴포넌트가 보낸 msg는 자식컴포넌트에서 props속성을 통해 받는다
매개변수명과 자료형을 같이 써준다
화면에 출력하기 위해 {{ }} 안에 매개변수명을 작성해주면 된다
결과창
'Vue.js' 카테고리의 다른 글
| [Vue.js]데이터 바인딩(v-bind), 매개변수 디폴트값 지정(default), data속성을 이용한 데이터 저장 (0) | 2021.04.29 |
|---|---|
| [Vue.js]컴포넌트 중첩(매개변수 여러개 전달) (0) | 2021.04.29 |