CompProp.vue_20211220

<template>
    <div>
        <h3>CompProp 예제</h3>
        <comp-1 :num1="age" :str1="name" @addNum1="addNum1()"></comp-1> <!-- 컴포넌트 사용 -->
        <hr />
        <comp-1 :num1="age+20" :str1="name+'aaa'" @addNum1="addNum1()"></comp-1>
        <hr />
        <comp-2 :n1="age1" :s1="name1" :k1="k1" @handleNum1="handleNum1()"></comp-2>
        <hr />
        <comp-2 :n1="age1+10" :s1="name1+'qwe'" :k1="k1+'zzz'" @handleNum1="handleNum1()"></comp-2>
        <!-- 누가 만들어 놓은 컴포넌트(Comp1, Comp2)를 script에서 불러오고
        template에서 어떤 것을 어떻게 쓸지 결정 -->
    </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++;
            },
            handleNum1() {
                this.age1--;
            }
        },
        // 사용할 컴포넌트 등록
        components: {
            'comp-1': Comp1,
            'comp-2': Comp2
        },

        data() {
            return {
                name: '가나다',
                age: 23,
                name1: '마바사',
                age1: 30,
                k1: 'abc',

            }
        }
    }
</script>

<style scoped>

</style>