공부하는데 자꾸 까먹고 볼 때마다 헷갈려서 작성하면서 다시 외우려고 작성해둠
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app1">
<com1 txt1="asdf" v-bind:txt2="text1"></com1>
</div>
<script type="text/javascript">
Vue.component('com1', {
template: '<p>{{txt1}}, {{txt2}}</p>',
props:['txt1', 'txt2']
})
var app = new Vue({
el: '#app1',
data: {
text1: 'tttttttt'
}
})
</script>
</body>
props는 전달 받을 속성 (위에선 txt1과 txt2가 전달받을 속성)
template안에 {{txt1}}은 전달 받은 txt1의 값이 표기됨, {{txt2}}는 txt2의 값
<com1 txt1="asdf" v-bind:txt2="text1"></com1> 여기서
txt1="asdf'는 입력한 값 그대로 txt1로 값을 전달함
v-bind:txt2="text1"은 부모 인스턴스에 있는 데이터 text1의 값을 가져와서 전달함
(:txt2="text1"로도 쓸 수 있음)
v-bind:txt2="text1"말고 다른 값을 선언하면 부모 인스턴스에 선언된 게 text1 말곤 없기 때문에 에러 출력
그리고 이 리터럴 방식은 문자열로만 전달된다.
text1="1111"로 넘기면 정수 값 1111로 오는 게 아니라 문자열 1111로 온다는 뜻
정수로 받기 위해선 다른 방법을 써야 함
그리고 props: []는 단순 속성에 대한 값만 받는 거고 이 받는 값에 대한 검증을 할 수 있음
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app1">
<!-- <com1 txt1="asdf" v-bind:txt2="text1"></com1> -->
<com1 :txt1="text2" v-bind:txt2="text1"></com1>
<div>------------------------------------</div>
<com1></com1>
<div>------------------------------------</div>
<com1 :txt1="aaa" v-bind:txt2="text1"></com1>
</div>
<script type="text/javascript">
Vue.component('com1', {
template: '<p>{{txt1}}, {{txt2}}</p>',
// props:['txt1', 'txt2']
props:{
txt1: {
type: Number,
required: true,
default: 10
},
txt2: {
type: String,
default: 'ttt'
}
}
})
var app = new Vue({
el: '#app1',
data: {
text1: 'tttttttt',
text2: 22
}
})
</script>
</body>
type은 속성에 대한 타입을 의미
txt1는 숫자만 받을 수 있음
좀 전에 이야기했던 것처럼 그냥 txt1="11"로 보내면 11은 문자열이기 때문에 에러 출력함
txt2는 문자열
required: true는 무조건 전달받는 값이 있어야 한다는 뜻
default는 전달받는 값이 없을 경우 기본 값으로 표기해줄 값을 지정해줌
txt2가 그 예인데 html단에 선언된 두 번째 com1 컴포넌트를 보면 속성을 아무것도 지정하지 않음
그러면 txt2는 ttt를 표기해주고 txt1의 경우 default 값을 화면상에 표기는 해주지만 console 창에 보면 에러가 찍혀있음
정해진 type과 잘못된 데이터가 들어와도 화면에는 그대로 보여주고 console 창에만 에러가 출력됨
'VueJS' 카테고리의 다른 글
| [VueJS] vue-cli + vuex + jwt 로그인 기능 구현하기 (2) | 2021.02.27 |
|---|---|
| [VueJS] vue : 이 시스템에서 스크립트를 실행할 수 없으므로.... (0) | 2021.02.02 |
| [VueJS] Component template requires a root element, rather than just text. (0) | 2021.01.24 |
| [VueJS] v-for (0) | 2021.01.23 |
| [VueJS] v-if, v-else-if, v-else 사용시 알아둘 것 (0) | 2021.01.23 |