JavaScript

Vue props, emit

doopang 2023. 11. 21. 13:17

상위 컴포넌트

<ChildComponent ref="ChildComponent"
                :prop1="propName1" 
                :prop2="propName2" 
                @event1="methodName1"
                @event2="methodName2" />
methods: {
    methodName1 (data) (
        ...
    },
    methodName2 (data) {
        ...
    },
    methodName3 () {
        this.$refs.ChildComponent.method3(data)
    }
}

하위 컴포넌트

<button @click="method1(data1)">버튼1</button>
<button @click="method2(data2)">버튼2</button>

props: {
    propName1: {},
    propName2: {}
}
methods: {
    method1 (data) {
        this.$emit('event1', data1)
    },
    method2 (data) {
        this.$emit('event2', data2)
    },
    method3 (data) {
        ...
    }
}