컴포넌트통신 2

Vue 부모자식 컴포넌트 데이터 교환 함수호출

vue를 사용하다 보면 컴포넌트 통신은 필수적으로 일어난다 그때 사용하면된다 -refs, props 부모-> 자식 1.props 주로 초기 변수 전달을 위해 사용했다 줄 때(부모) v-bind:변수 이름:변숫값 v-bind->: 줄여서 표현 가능하다 받을 때(자식) props안에 변수 이름을 쓰고 사용할 때는 this. 변수 이름으로 사용한다 2.refs 주로 자식 함수를 호출하기 위해 사용했다 사용법 this.$refs. 태그에 지정한 ref값. 지정 컴포넌트 안에 함수 3.emit 자식 -> 부모 1. 자식 this.$emit('명칭', '전달할 변수') 2. 부모 v-on:명칭="호출할 함수" 아주 쉽게 컴포넌트 통신을 할 수 있다

Vue/vue2 2022.02.15

vue.js eventbus 컴포넌트간 주고받기!

카카오 지도를 호출하였다 검색만 해주면 된다 문제는 컴포넌트 간에 어떻게 주고받아야 할지 몰랐다 쉽게 말해서 지도/내비 바/풋터는 한화면에 각기 다른 컴포넌트이다 즉 검색창에 타이핑 후 search버튼을 눌렀을 때 지도 컴포넌트에게 검색 값을 줘 야한다 구글링 결과 eventbus를 활용하기로 결정하였다! 1.eventbus 만들기 Vue.prototype.$EventBus = new Vue(); main.js에 이렇게만 해주면된다 2. 메서드 지정하기 네비 바로 가자 this.$EventBus.$emit('searchStore',storeKeyword); 뭔뜻이나면 searchStore로 storeKeyword를 전송한다는것이다 emit은 지정할때 on은 받을때 쓴다 받는곳으로 가보자! this.$Ev..

Jang_bo_go 2021.12.16