<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!--
<app-header v-bind:ํ๋กญ์ค ์์ฑ ์ด๋ฆ="์์ ์ปดํฌ๋ํธ์ ๋ฐ์ดํฐ ์ด๋ฆ"></app-header>
-->
<app-header v-bind:propsdata="message"></app-header>
<!-- ์ปดํฌ๋ํธ์ props๋ช
๋ฐ์ธ๋ฉํด์ฃผ๊ณ , ์์ ์ปดํฌ๋ํธ์ ์์ฑ ๊ฐ์ ์ ์ด์ค๋ค -->
<app-content v-bind:propsdata="num"></app-content>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appHeader = {
template : '<h1>{{ propsdata }}</h1>' ,
//์๋์์ ๋ฐ์ props ์ด๋ฆ ์ง์
props : ['propsdata']
}
var appContent = {
template : '<div>{{ propsdata }}</div>' ,
//์๋์์ ๋ฐ์ props ์ด๋ฆ ์ง์
//๋ค๋ฅธ ๋ช
์นญ์ ์ฌ์ฉํ์ฌ๋ ๋๊ณ , ๊ฐ ๋ฒ์์์ ์ ๋ํฌํ๊ฒ ์ ์ฉ๋๊ธฐ ๋๋ฌธ์
//๋ค๋ฅธ ์ปดํฌ๋ํธ์ props๋ช
์ด ๋์ผํด๋ ๊ด๊ณ์๋ค.
props : ['propsdata']
}
new Vue({
el : '#app' ,
components : {
'app-header' : appHeader,
'app-content' : appContent
},
data : {
message : 'hi',
num:10
}
})
</script>
</body>
</html>
Root ์ปดํฌ๋ํธ์์ ์ง์ ํ ์์ฑ ๊ฐ์ด ๋ฐ๋๋ฉด (ex: num, message)
์๋์ผ๋ก ์์ ์ปดํฌ๋ํธ์ ๊ฐ๋ ๋ฐ๋๋ค.
์ด๊ฒ์ด ๋ฐ๋ก Vue์ Reactivity