컴포넌트 통신 방식 및 구현.. (props, event emit)

• 상위에서 하위로는 데이터를 내려줌, 프롭스 속성
• 하위에서 상위로는 이벤트를 올려줌, 이벤트 발생

Props

프롭스 속성은 컴포넌트 간에 데이터를 전달할 수 있는 컴포넌트 통신 방법이다.
프롭스 속성을 기억할 때는 상위 컴포넌트에서 하위 컴포넌트로 내려보내는 데이터 속성으로 기억하면 된다.

코드

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

<div id="app">
    <!-- <app-header v-bind:props 속성의 이름="상위 컴포넌트의 데이터 이름"></app-header> -->
    <app-header v-bind:title="appTitle"></app-header>
</div>

<script>
    Vue.createApp({
        data() {
            return {
                // props로 보낼 데이터
                appTitle: "props로 넘기기",
            };
        },
        components: {
            "app-header": {
                template: "<h1>{{title}}</h1>",
                // props 속성 이름을 명시
                props: ["title"],
            },
        },
    }).mount("#app");
</script>

결과

Event emit

이벤트 발생은 컴포넌트의 통신 방법 중 하위 컴포넌트에서 상위 컴포넌트로 통신하는 방식입니다.
예를 들면 하위 컴포넌트에서 데이터의 갱신을 요청할 때의 쓰입니다.
ex. 리액트에서 하위 컴포넌트로 props로 보낸 setState 함수에서의 상위 컴포넌트 state 값 변경

코드

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

<div id="app">
    <!-- <app-contents v-on:하위 컴포넌트에서 보낸 이벤트="상위 컴포넌트에서 실행 시킬 함수"></app-contents> -->
    <app-contents v-on:refresh="showAlert"></app-contents>
</div>

<script>
    // 하위 컴포넌트
    const appContents = {
        template: `
            <p>
                <button v-on:click="sendEvent">갱신</button>    
            </p>
        `,
        methods: {
            sendEvent() {
                // 상위 컴포넌트로 보낼 이벤트
                this.$emit("refresh");
            },
        },
    };

    // 상위 컴포넌트
    Vue.createApp({
        methods: {
            showAlert() {
                alert("새로고침");
            },
        },
        components: {
            // 내용이 길어져서 따로 내부는 객체를 선언해서 가져왔다.
            "app-contents": appContents,
        },
    }).mount("#app");
</script>

결과

Vue 개발자 도구에서 버튼 클릭 시, emit으로 쏘아 올린 refresh 이벤트가 감지되는 것을 볼 수 있다.

'하위 컴포넌트에서 a라는 이름의 이벤트를 보냄 -> 상위 컴포넌트에서 a라는 이벤트를 받으면, 어떠한 함수를 실행' 이런 흐름이다.