28. 싱글 파일 컴포넌트에서 컴포넌트 등록
캡틴판교 장기효님의 Vue.js시작하기 인프런 강의를 수강하고 내용을 정리했다.
매일 20분 야금야금 Vue.js 화이팅.
IDE: Visual Studio Code
크롬 뷰 개발자 도구: Vue.js devtools
지난시간에는 싱글 파일 컴포넌트를 배웠다.
앞서 배운 것들을 App.vue 싱글파일 컴포넌트에 적용해보자.
App.vue에 컴포넌트 등록도 해보자.
데이터 정의하고 데이터 바인딩
1. App.vue 초기화 하고 vue명령어로 틀 만들기
App.vue의 내용을 삭제하고 vue 명령으로 template, script, style로 구성된 구성을 만든다.
2. template 내부에 '최상위' HTML 엘리먼트는 딱 하나만 가질 수 있다.
template 내부에 div태그 하나만 만들자.
<template>
<div>
app
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
[가능] div 태그 1개만 최상위 레벨이다.
[불가능] div태그 2개가 최상위 레벨이다.
eslint가 표시한 빨간 줄에 hover 해보면,
The template root requires exactly one element.
템플릿 루트가 딱 하나의 엘리먼트를 요구한다고 설명이 뜬다.
3. npm run serve 로 실행하고 개발자도구 뷰 컴포넌트 확인
npm run serve
뷰를 실행하면 터미널에 아래처럼 실행된 주소가 뜬다. 포트가 8080이다.
개발자도구를 켜보면 Root 컴포넌트가 보이는걸 확인할 수 있다.
4. 인스턴스 속성 정의하기
기존에는 data 정의를 아래와 같이 했었다.
new Vue({
data:{
str: 'hi'
}
})
이제는 export default 내에 data를 선언할 때,
function() return {} 형식으로 새 객체를 반환해야 한다.
여러 컴포넌트에서 동일한 값을 공유하면 안되기 때문이다.
5. 콧수염 괄호로 데이터 바인딩
<template>
<div>
{{ str }}
</div>
</template>
<script>
export default {
data: function(){
return {
str: 'hi'
}
}
}
</script>
<style>
</style>
App.vue에 컴포넌트 등록하기
AppHeader라는 컴포넌트를 만들고, App.vue에 컴포넌트를 등록해보자.
1. AppHeader 컴포넌트를 components 디렉토리에 추가
AppHeader.vue 뷰 파일을 만들고, vue명령어로 틀을 만든다.
h1 태그를 추가하자.
<template>
<header>
<h1>Header</h1>
</header>
</template>
<script>
export default {
}
</script>
<style>
</style>
2. App.vue에 AppHeader 컴포넌트 Import를 작성
script 태그 내에 컴포넌트 명과 경로를 Import 문을 작성한다.
import 컴포넌트 이름 from './상대경로 작성'
import 하면, AppHeader 컴포넌트를 변수처럼 쓸 수 있다.
<script>
import AppHeader from './components/AppHeader.vue'
export default {
data: function(){
return {
str: 'hi'
}
}
}
</script>
3. App.vue의 components에 AppHeader 컴포넌트를 등록하자.
components 속성 안에 AppHeader 컴포넌트를 'app-header'라는 이름으로 등록했다.
<script>
import AppHeader from './components/AppHeader.vue'
export default {
data: function(){
return {
str: 'hi'
}
},
components: {
'app-header': AppHeader
}
}
</script>
4. template에 컴포넌트 등록해보기
template에 컴포넌트 태그를 등록하려면 자동완성으로 app-header가 보인다.
5. 저장하고 개발자도구에서 컴포넌트가 등록되었는지 확인하자
실습한 전체 코드
<template>
<div>
<app-header></app-header>
</div>
</template>
<script>
import AppHeader from './components/AppHeader.vue'
export default {
data: function(){
return {
str: 'hi'
}
},
components: {
'app-header': AppHeader
}
}
</script>
<style>
</style>
다음 시간에는 싱글 파일 컴포넌트에서 props 속성을 사용해보자
Author And Source
이 문제에 관하여(28. 싱글 파일 컴포넌트에서 컴포넌트 등록), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@freejia/28.-싱글-파일-컴포넌트에-배운-내용-적용하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)