[Vue3] Props, Emit 정리

 

vue 강좌 영상을 여러번 봐도 직접 하질 않으니..

이해를 못했던 props..

이번에 프로젝트 공통 컴포넌트 만들면서 드디어 해봐뜨아!!

 

props

부모 컴포넌트에서 자식 컴포넌트한테 변수값을 전달하기 위함!

예를 들어,

프로젝트 기준으로 multi selected dropdown 공통 컴포넌트를 만들었는데,

다른 vue에서 불러다 쓰러면, 이 다른 vue 가 부모고, 공통 컴포넌트가 자식!

emit은 그 반대!

 

props를 좀 풀어서 얘기하면

멀티 컴포넌트야! 내가 변수(데이터)줄테니깐 너가 받아서 알아서 만들어줘!!

이렇게 되는 것이지 ㅎ

 

To-do

A(부모) : productionAssortment.vue

B(자식) : MultiSelectDropDown.vue (common component)

 

1. A에서 data-item을 보내면

<MultiSelectDropDown

:style="{ width: '300px' }"

:multidropdownData="multidropdownData"

@change="multiselectchange"

/>

2. B에서 props로 받고

props: {

multidropdownData: Array,

},

3. B에서 다시 emit으로 이벤트로 변경된 변수를 함께 A로 보내면

<multiselect

:style="{ width: '500px' }"

:data-items="multidropdownData"

v-model="selectedValue"

:required="true"

@change="multiselectchange"

/>

 

methods: {

multiselectchange(event) {

this.selectedValue = event.value;

this.$emit("change", event);

},

},

4. A에서 바뀐 변수 값을 다시 메소드를 호출하여 A 자신의 변수에게 저장

<MultiSelectDropDown

:style="{ width: '300px' }"

:multidropdownData="multidropdownData"

@change="multiselectchange"

/>

 

multiselectchange(event) {

this.selectedValue = event.value;

console.log(this.selectedValue);

},

 

 

줠라복잡하네 ㅅ_ㅅ

이런거 하는 나 너무 똑똑행

꺗!