Web_Vue/step20_childToParent.html at main · Playdata-Bigdata-Course/Web_Vue · GitHub

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
50
51
52
53
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>step20_childToParent</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <h3>자식 컴포넌트에서 부모 컴포넌트로 데이터 제공해주는 기술</h3>
    1. 부모 -> 자식 : props <br>
    2. 자식 -> 부모 : $emit() <br>
    3. 버튼 클릭시 데이터가 출력되는 UI <br>
    4. ?? 로직 하나 추가해서 스스로 이해 가능한 예제 구성하기
    review포함 12시까지
    제출
    <br><hr><br>

    <div id="app">
        <!-- <child-com v-on:event-name="발생된 이벤트로 인해 전송되는 데이터를 받는 부모 메소드명"></child-com> -->
        <child-com v-on:event-name="viewData"></child-com>
        <div>{{message}}</div>
    </div>

    <script>
        Vue.component("child-com",{
            template: '<button v-on:click="showLog">데이터보기</button>',
            methods: {
                showLog : function(){
                   //부모에게 데이터 제공 로직
                   //(이벤트명,데이터)
                   this.$emit('event-name', 'child가 제공하는 데이터')
                }
            }
        });

        new Vue({
            el:"#app",
            //자식이 제공해주는 데이터를 받는 변수(property, model)선언
            data:{
                message:'부모 데이터'
            },
            methods:{
                viewData: function(v){
                    console.log(v);
                    this.message = v;
                }
            },
        });

    </script>
</body>
</html>