Vue.js 같은 레벨의 콤포넌트 통신 방법!

 

 

 

 

---

 

 

1.같은 콤포넌트 레벨간 통신

예) Root 인스턴스

a.appHeader

b.appContent

a<->b사이의 어떻게 통신을 할지 확인

 

 

-script 생성

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

 

-새로운 인스턴스 생성

 

        new Vue({
            el:'#app',
            data:{
                str:'hi'
            }

        })

 

-div에도 str값이 출력 될 수 있도록

 

    <div id="app">
        {{str}}
    </div>

 

 

-live server로 확인하면, Root안에 str 스트링 값이 'hi'가 제대로 출력 되는걸 볼 수 있다.

 

 

 

2.실습!

*app-header과 app-content 콤포넌트를 만들고, 각각을 변수와 연결, div로 화면에 출력하도록

 

1)new Vue로 인스턴스 만들기

div중 app과 연결되고, 구성하는 콤포넌트를 각 app-header은 appHeader과, app-content는 appContent와 연결한다.

        new Vue({
            el:'#app',
            components:{
                'app-header':appHeader,
                'app-content':appContent
            }

        })

 

2)위에서 만든 appHeader과 appContent를 변수로 만든다.

template을 사용하여 h태그를 줘도 되는데 나는 일단 안줌

 

        var appHeader = {
            template:'<div>header</div>'
        }

        var appContent = {
            template:'<div>content</div>'
        }

 

3)div내에서 각 변수를 불러서 출력해본다.

 

    <div id="app">
        <app-header>HI</app-header>
        <app-content>Hello</app-content>
    </div>

 

 

4)live server에서 확인한다.

 

 

 

5)특정 버튼을 눌렀을때, 숫자 값을 같은 컴포넌트 레벨에서 넘겨주도록

-div안에 btn 태그를 추가해줌

 

        var appContent = {
            template:'<div>content<button>go!</button></div>'
        }

 

-헤헤 귀여운 버튼이 생겼다.

 

 

-버튼을 클릭했을 때, 메서드를 사용하여, 동작이 일어나도록

a.button에 v-on:click으로 클릭 했을 때에 passNum이라고 지칭한 함수를 실행시킨다를 입력

b.methods를 추가하여, passNum이라는 함수를 추가

c. pass, 10을 출력하도록 입력

        var appContent = {
            template:'<div>content<button v-on:click="passNum">go!</button></div>',
            methods:{
                passNum: function(){
                    this.$emit('pass',10)
                }
            }
        }

 

 

d. live server를 확인하면 만든 버튼을 클릭하면, event탭에서 이벤트가 생성된걸 볼 수 있다.

-Appcontent에서 온 이벤트이며, pass라는 이름이다! payload를 확인하면 10이 나온다.

 

 

 

6)같은 콤포넌트 레벨을 올려주기 위해선 상위 콤포넌트로 올리고(현재 코드에선 root), 다시 AppHeader로 내려줘야한다. 

**event->props과정을 거치는것이다.

 

 

-Vue인스턴스에 data로 0을 추가해주면, 기본적으로 0의 데이터를 갖고 있게 된다.

        new Vue({
            el:'#app',
            components:{
                'app-header':appHeader,
                'app-content':appContent
            },

            data:{
                num:0
            }

        })

 

 

-new Vue에 num을 추가해줘서,  Root의 기본 값은 0인상태를 live server에서 확인

 

 

-pass이벤트로 값을 받자! div에 v-on:pass를 추가함

-deliverNum이라는 새로운 함수 추가. 이 함수가 어떤건지 정의해 주어야함. 상위콤포넌트에 methods를 추가

 

        <app-content v-on:pass="deliverNum"></app-content>

 

-this.$emit('pass',10)에서 10으로 인자로 넘어온 내용은 function에서 value로 받아줄 수 있음

-value를 넣어줘서  <app-content v-on:pass="deliverNum"></app-content>에서 deliverNum에 value를 선언하지 않아도 자연스럽게 value가 넘어옴

-this.num은 value다 라고 적어주기.

        new Vue({
            el:'#app',
            components:{
                'app-header':appHeader,
                'app-content':appContent
            },

            data:{
                num:0
            },
            methods:{
                deliverNum:function(value){
                    this.num = value;

                }
            }

        })

 

 

7)이전과 다르게 Root의 data값도 버튼을 클릭했을 때, 10인걸 확인할 수 있다.

=>그럼 이제 root의 값을 받아서 appHeader로 넘겨주는것!

 

 

8)프롭스를 사용하여 데이터 넘겨주기

형식은 v-bind:프롭스 속성이름 =""올, 프롭스 속성을 정의해주면 된다.

 <app-header v-bind:프롭스 속성이름="num"></app-header>

 

-appHeader에 프롭스 속성 정의

 

        var appHeader = {
            template:'<div>header</div>',
            props :['propsdata']
        }

 

 

결론:

 

<app-header v-bind:propsdata="num"></app-header>

 

 

live server에서 확인하기

=> appContent에서 root로, root에서 appHeader로 잘 내려온걸 확인가능