PROPS
by duckduck0054
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>06-16</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<template id="listTemplate">
<li>{{message}}</li>
</template>
<script type="text/javascript">
Vue.component('list-component', {
template : '#listTemplate',
props : { //prop을 상위라고 하고 template를 하위라고 생각하자.
message : { type:String, default:'안녕하세요' },
count : { type:Number, required:true },
countries : {
type:Array,
default: function() {
return ['대한민국'];
}
}
}
//중요한 것 중 하나는 Vue.component로 컴포넌트를 등록할 때 그 순서에 따라
//상위-하위 컴포넌트가 된다고 한다. 그리고 인스턴스 자체가 최상위 컴포넌트가 된다고
//하니 이 점도 중요한 부분 중 하나일 듯 하다.
})
</script>
<body>
<div id="app">
<ul>
<list-component message="Hello" v-bind:count="100"
v-bind:countries="['미국', '영국', '호주']"></list-component>
<list-component message="씬짜오" :count="21"
:countries="['베트남']"></list-component>
<list-component message="니하오마"
:countries="['중국', '타이완']"></list-component>
<list-component v-bind:count="1000"></list-component>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.devtools = true;
var vm = new Vue({
el : "#app"
})
/*
data 옵션을 주의해야 하는데,
컴포넌트 기반으로 개발할 때 data 옵션은 각 컴포넌트의 로컬 상태를 관리하기 위한 용도로만 사용한다.
또한 하나의 컴포넌트를 앱에서 여러 번 사용할 경우에 모두 다른 상태 정보를 가져야 한다.
따라서 지금까지 한 것 처럼 data 옵션을 단순한 객체 값으로 작성할 수 없다.
단순한 객체 값으로 작성하는 경우 객체가 참조형 값이므로 모두 동일한 값을 참조하게 되기 때문.
따라서 컴포넌트에서 data 옵션은 반드시 함수로 작성하고 함수 내부에서 객체를 리턴 하도록 작성해야 한다.
********************************************************************************
컴포넌트 내부의 로컬 상태 정보를 저장하기 위해 data 옵션을 사용할 수 있다.
하지만 이제 data 옵션에 객체를 직접 지정하면 컴포넌트가 정상적으로 렌더링되지 않고 오류가 발생한다.
그 이유는 함수가 호출되어 리턴 된 객체가 data 옵션에 주어지기 때문입니다.
data 옵션에 함수를 지정하는 이유는 동일한 컴포넌트가 여러 번 사용될 경우
동일한 객체를 가리키는 것이 아니라 함수가 호출될 때마다 만들어진 객체가 리턴 되기 때문이다.
또한 list-componenet 에...