VUE.JS

Props 관련 예제 및 실습

JUMP개발자 2020. 4. 26. 21:44

 

Props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용합니다.

 

props / Emit 관계 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
 
 
    <div id="app">
        <app-header v-bind:propsdata="message">
        </app-header>
        
        <app-header v-bind:propsdata="num">
        </app-header>    
    </div>
 
  <script>
 
    appHeader = {
      template : '<h1>{{ propsdata }}</h1>',
      props : ['propsdata']
    },
 
    appContent ={
      template : '<h1>{{propsdata}}</h1>',
      props : ['propsdata']
    }
 
    new Vue({
 
      el : '#app',
      data : {
        message : "HI bins",
        num : 3
      },
      components : {
        'app-header' : appHeader,
        'app-content' : appContent
      }
    });
 
  </script>
  
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter