Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

메모장

Vue props, emit 본문

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) {
        ...
    }
}

'JavaScript' 카테고리의 다른 글

Vue Store  (0) 2023.12.26
TOAST UI Grid Pagination(Server)  (0) 2023.12.15
TOAST UI Grid Pagination Using Callbacks  (0) 2023.09.16
Vue vee-validate  (0) 2023.03.14
FormData 로그 보기  (0) 2023.02.20