same level low component끼리의 데이터 이동

<div id="app">
    <app-header v-bind:app-title="message"></app-header>
    <app-contents v-on:login="receive"></app-contents>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>

var appContents = {
    template : `
        <p>
            <button v-on:click="sendEvent">로그인</button>
        </p>
    `,
    methods: {
        sendEvent() {
            this.$emit('login');
        }
    }
}

var appHeader = {
    props:['appTitle'],
    template : `<h1>{{appTitle}}</h1>`
}
//루트 컴포넌트
Vue.createApp({
    data() {
        return{
            message: ''
        }
    },
    methods:{
        receive(){
            this.message = '로그인 됨';
        }
    },
    components : {
        'app-header' : appHeader,
        'app-contents' : appContents
    }
}).mount('#app');
</script>

 

위의 코드는

 

(상위 컴포넌트) root

(하위 같은 레벨 컴포넌트) app-header , app-contents가 있다.

 

1) app-contents에서 버튼을 클릭하면 app-header의 데이터가 변경되어야 한다.

2) app-contens에서 버튼 클릭하면 sendEvent()가 발생하며 emit으로 상위 컴포넌트에 메세지를 보냄

3) emit을 v-on:에밋으로 설정하며 상위컴포넌트의 receive()가 발생한다.

4) receive에서는 data()를 변경하게 된다. 전에 배웠듯이 reative로 인해 데이터가 변경된다.

5) 이 변경된 데이터는 props를 app-header에 v-bind:프롭스명을 통해 전달되며

6) app-header에는 props로 정의된 appTitle에 저장된다.

7) app-header의 template에서 그 props를 사용하게 하면 된다.

++ app-header에 v-bind:app-title 부분은 vue규칙으로 인해 appTitle로 읽게 된다. 따라서 저렇게 쓴것 뿐이다.

이후 진행하다보면 .vue 파일을 쓸것인데, 그 때는 상관 없이 사용할 수 있게 된다고 한다.