Comp3.vue + CompSlot.vue

emit은 자식이 부모에게 함수를 보냄
props는 부모가 자식에게 값을 보냄

CompSlot.vue (부모)

1. 부모 컴포넌트에서 자식 컴포넌트를 import함

import Comp3 from'./comp/Comp3.vue';

2. 상태변수를 정함

data(){
            return{
                name : 'asdf',
            }
        }

3. 컴포넌트를 정의함

components:{
            'comp-3' : Comp3
        },

4. 부모 화면 내에 출력 될 컴포넌트를 불러옴

<div>
    <h3>Comp Slot 예제</h3>
    <comp-3 :name="name">
        <template v-slot:left>
            <p>왼쪽입니다.</p>
            <input type="button" value="name값이 asdf->defg" />
        <!-- 자식의 버튼 -> 눌러서 부모의 특정값(name) 변겅 -->
        </template>

        <template #right>
            <p>오른쪽입니다.</p>
        </template>

        <template #center>
            <p>중간입니다.</p>
        </template>
    </comp-3>
</div>

Comp3.vue (자식)

1. 부모에게서 전달 된 변수값

export default {        
        props:{
            name:{
                type:String,
                default:''
            }
        }
    }

2. props로 전달되는 값

<div>
        <h3>slot 예제</h3>
        <p>props로 전달되는 값 {{name}}</p>
        <hr>

        <slot name="left"></slot>
        <hr> <!-- 왼쪽입니다 -->

        <slot name="center"></slot>
        <hr> <!-- 중간입니다 -->

        <slot name="right"></slot>
             <!-- 오른쪽입니다 -->
    </div>