[Vue CLI] 04. 컴포넌트의 생성 및 사용
첫번째 방법
: 하나의 파일을 다른 하나의 파일에서 불러오는 형태.
App.vue가 있는 위치 동일하게 Home.vue 파일을 만든다.
대략 이렇게 코드가 있다고 한다면 "홈 입니다."를 App.vue 화면에서 불러올 수있도록 component를 생성해준다.
App.vue파일에서는 script부분에 ./Home.vue파일을 HomeComponent라는 이름을 만들어서 import해온다.
그리고 export default에서 componets로 HomeComponent를 추가한 뒤
template 부분에서 import 해온 이름으로 태그를 써주면 Home.vue에서 만들었던 homeTitle을 불러올 수있다.
두번째 방법
: 전체에서 하나의 파일을 불러오는 즉, 전역에서 컴포넌트를 사용할 수있도록 선언해 주는 방법
App.vue와 같은 위치에 컴포넌트로 사용할 파일을 만들어준다.
Status.vue
그런다음 컴포넌트를 전역에서 쓸 수있도록 main.js에 import 시켜준다.
Status.vue 파일을 StatusComponents라는 이름으로 import해 온 다음
component를 만들어줄건데 이름은 AppStatus 할거고 StatusComponents로 가져온 파일을 쓸거다라고 정의해준다.
화면에서 보여줄 파일에서 AppStatus 태그만 추가해주면 끝.
www.youtube.com/watch?v=ybFZK1-01zk&list=PLZzSdj89sCN0sLqrTKf2m7lXe_93C19UG&index=4