Comp2.vue

자식 Comp2.vue

<template>
    <div>
        <h4>Comp2 컴포넌트</h4>
        <span>{{ s1 }}</span><br>
        <span v-text="n1"></span><br>
        <span v-text="k1"></span>
        <input type="button" value="num1의 값 감소"
            @click="handleNum1()" />
    </div>
</template>

<script>
    export default {
        // props 변수 : 사용을 하게 되는 부모컴포넌트에서 전달되는 값
        props : {
            s1 :{
                type : String,
                default :''
            },
            n1 : {
                type : Number,
                default : 0
            },
            k1 : {
                type : String,
                default : ''
            }
        },
        methods : {
            handleNum1(){
                this.$emit('subNum');
            }
        }
    }
</script>

<style scoped>

</style>

자식의 버튼에

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

클릭 이벤트 명을 정의하고,
handleNum1()을
$emit을 이용해서 subNum 이라는 이름으로 부모에게 던진다.

자식 컴포넌트 : methods : { handleNum1(){ this.$emit('subNum');}}

부모 컴포넌트 : subNum1(){ this.age = this.age - 1; }

부모 CompProp.vue

---

<template>
    <div>
        <h3>CompProp예제</h3>
        <comp-1 :num1="age" :str1="name" @addNum="addNum1()"></comp-1> 
        <!-- '케밥표기법' : comp-1, comp-2 -->
        <!-- addNum1 은 부모쪽으로 올라온 이벤트를 의미 -->
        <hr>
        
        <comp-1 :num1="age+20" :str1="name+'aaa'" @addNum="addNum1()"></comp-1> 
        <!-- '파스칼표기법' : Comp1, Comp2 -->
        <hr>
        
        <comp-2 :s1="name+'abc'" 
        	:n1="age-13" 
            	:k1="price+' : nope'"
            @subNum="subNum1()"></comp-2>
    </div>
</template>

<script>
    import Comp1 from './comp/Comp1.vue';
    import Comp2 from './comp/Comp2.vue';
    
    export default {
        methods:{
            addNum1(){
                // this.age = this.age + 1;  // 아래와 같음
                this.age++;
            },
            subNum1(){
                this.age = this.age - 1;
            }
        },
        // 사용 할 컴포넌트 등록
        components:{
            'comp-1' : Comp1,
            Comp2
        },

    // 상태변수
        data(){
            return {
                name : '가나다',
                age : 23,
                price : 'a4',
            }
        }
    }    
</script>

<style scoped>

</style>

---

받은 subNum 을

메소드에서
subNum1(){ this.age = this.age - 1;}
으로 정의하고

<comp-1 :num1="age" :str1="name" @addNum="addNum1()"></comp-1>

으로 2번 컴포넌트 (Comp2.vue)에 표시한다.