Comp1.vue

1. Comp1.vue 라는 하위 컴포넌트 생성 (but, 우리가 짠게 아니라는 가정)
   // 외부 컴포넌트 가져와서

2. CompProps.vue 라는 기존 위치의 컴포넌트 생성

3. CompProps.vue 에 Comp1.vue 연결
   // 사용 할 컴포넌트 등록!!

   CompProp.vue

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

export default {
        // 사용 할 컴포넌트 등록
        components:{
            Comp1
        },

Comp1.vue

이와 동시에 Comp1.vue 에는 props 함수를 이용해
부모 컴포넌트로 부터 전달 받을 테이터 타입 정의

// props 변수 : 부모컴포넌트에서 전달되는 값
        props : {
            str1 :{
                type : String,
                default :''
            },
            num1 : {
                type : Number,
                default : 0
            }
        },

---

Comp2.vue

$emit = 자식 컴포넌트가 부모컴포넌트로 이벤트를 보냄

methods : {
            handleNum1(){
                this.$emit('subNum');
            }
        }

CompProp.vue

자식 컴포넌트에서 emit 함수를 받아서 이벤트를 정함

// Comp2.vue
<input type="button" value="num1의 값 감소"
            @click="handleNum1()" />

// CompProp.vue
<comp-2 :s1="name+'abc'" :n1="age-13" :k1="price+' : nope'"
            @subNum="subNum1()"></comp-2>   
           //subNum 을 자식으로 부터 받아오면 subNum1을 수행함
           
// subNum1() 함수를 정의함
methods:{            
            subNum1(){
                this.age = this.age - 1;
            }
        },