Vue.js 시작하기 11. 싱글컴포넌트 사용하여 개발 시작하기
App.vue 파일을 활용해서 한번 화면에 데이터를 뿌려보도록 하자.
기존에 html 소스 안에서 뷰 인스턴스를 생성했던 방법과는 아주 조금 다르다.
코드를 통해 알아보자
<template>
<div> <!--#1. 최상위 div 태그 선언 후 그 안에 header 등의 컴포넌트들을 선언해줘야 한다.-->
{{str}}
</div>
</template>
<script>
/* #2. 기존에 html 파일에서 인스턴스를 생성한 방법 */
// new Vue(){
// data : {
// str: 'hi'
// }
// }
/* #3. 싱글파일 컴포넌트에서 생성하려 했더니 에러 나는 방법 */
// export default {
// data : {
// str : 'hi'
// }
// }
/* #4. 싱글파일 컴포넌트에서 data를 선언하는 방법 */
export default {
data : function() {
return {
str : 'hi'
}
}
}
</script>
<style>
</style>#1. 싱글 파일 컴포넌트에서 html 을 선언할 때는, 가장 상위에 div 태그를 하나 선언하고 ,
그 안에 header던, body던 생성을 해줘야 한다.
#2. 기존에 html 파일에서 뷰 인스턴스 객체를 선언하고 주입해주었던 방식
#3. 싱글파일 컴포넌트에서는 이런식으로 변수를 선언해주면 안되고 #4. 방식으로 선언을 해주어야 한다.
그 이유는, 여러 객체들의 재사용성을 높이기 위함으로 변수를 함수형으로 선언하고 , 해당 값을 리턴해주는 형태로 사용한다.
#싱글파일 컴포넌트 체계에서 컴포넌트 등록하기
컴포넌트를 등록하기 위해서는 조건이 있다.
1. 컴포넌트 파일명은 파스칼케이스로 ex. AppHeader.vue
2. 컴포넌트 파일명은 두 단어 이상의 조합으로 한다( html 표준 태그와 구별되기 위해서 )
우선 헤더로 쓰일 컴포넌트 파일을 하나 작성해준다. 파일명은 AppHeader.vue
//AppHeader.vue
<template>
<header>
<h1>Header</h1>
</header>
</template>
<script>
export default {
}
</script>
<style>
</style>
그리고 이 파일을 헤더로 사용하기 위해서 App.vue 파일에서 import 후 변수로 받아와서 template영역에 태그로 구현해준다.
코드로 알아보자.
//App.vue 파일
<template>
<div>
<app-header></app-header> // #3. app-header 태그를 호출함으로써 div 영역 최상위에 AppHeader 내용을 보여준다.
</div>
</template>
<script>
//#1. AppHeader.vue를 임포트하고 그 이름을 AppHeader라 하겠다.
import AppHeader from './components/AppHeader.vue'
export default {
data : function() {
return {
str : 'hi'
}
} ,
//#2. AppHeader를 뷰의 컴포넌트에 주입해준다. 그 이름은 app-header라 하겠다.
components : {
'app-header' : AppHeader
}
}
</script>
<style>
</style>
#싱글파일 컴포넌트 체계에서 Props 속성 사용하기
현재 컴포넌트의 구조는
-Root
-App
-AppHeader
로 되어있기 때문에 App에서 AppHeader로 데이터를 보내주기 위해서는 props 속성을 사용해야 한다. app-header 태그에 v-bind:props 속성으로 AppHeader의 props 변수와 App의 보내주고자 하는 변수를 맵핑해주면 된다.
코드를 통해 알아보자
//App.vue 파일
<template>
<div>
<!-- #2. str 값을 Header에 넘겨주기 위해 app-header 태그에서 -->
<!-- v-bind:"하위컴포넌트의 인자" : "상위컴포넌트에서 넘길 데이터 를 호출한다. -->
<app-header v-bind:propsdata="str"></app-header>
</div>
</template>
<script>
import AppHeader from './components/AppHeader.vue'
export default {
data : function() {
return {
str : '프롭스 내려간다.' // #1. App to AppHeader로 전달할 변수
}
} ,
components : {
'app-header' : AppHeader
}
}
</script>
<style>
</style>
상위 컴포넌트에서 데이터를 받아오는 AppHeader에서는, 변수를 받아올 props속성만 선언을 해주면 된다.
// AppHeader.vue
<template>
<header>
<h1>{{propsdata}}</h1>
</header>
</template>
<script>
export default {
// #1. props 속성으로 선언한 propsdata라는 이름의 배열
props: ['propsdata']
}
</script>
<style>
</style>
#싱글파일 컴포넌트 체계에서 event 사용하기
이벤트를 사용하기 위해서는, AppHeader에서 $emit을 통해 함수명을 App으로 넘겨준다.
App.vue에서는 app-header 태그 내에서 v-on으로 받아온 함수에 대한 콜백처리를 해준다.
//AppHeader.vue
<template>
<header>
<h1>{{propsdata}}</h1>
<button v-on:click="sendEvent">send</button>
<!-- #1. 버튼을 클릭하면 sendEvent라는 이름의 함수를 호출한다.-->
</header>
</template>
<script>
export default {
props: ['propsdata'],
methods : {
sendEvent : function () {
// #2. sendEvent는 상위 컴포넌트에 renew라는 데이터를 넘겨준다.
this.$emit('renew');
}
}
}
</script>
<style>
</style>
//App.vue
<template>
<div>
<!-- #. AppHeader 로 보내는 props 속성은 v-bind로,
AppHeader에서 받아온 event 속성은 v-on으로 처리.
-->
<app-header v-bind:propsdata="str"
v-on:renew="renewStr"
></app-header>
</div>
</template>
<script>
import AppHeader from './components/AppHeader.vue'
export default {
data : function() {
return {
str : '프롭스 내려간다.'
}
} ,
components : {
'app-header' : AppHeader
},
methods : {
renewStr : function () {
// #4. 이벤트를 받아왔을 때 처리할 renewStr 함수
this.str = '이벤트 받았따.';
}
}
}
</script>
<style>
</style>
해당 포스팅은 인프런의 Vue.js 시작하기 - Age of Vue.js 학습 후 정리한 내용임을 알려드립니다.