[VueJS] 부모 자식 간의 연동 (props & emits )

[VueJS] 부모 자식 component 간의 연동 (props & emits)

 

 

 

 

 

 

 

component 관계: 현재창에서 다른창을 불러왔을 때, 현재창은 부모, 불려온 창은 자식 관계가 성립됨

 

 

 

 

 

 

[emits: 자식에서 부모로 보냄]

// emit => 자식에서 부모로 보냄

// 자식창에서,
emits: ['emitName1', 'emitName2', ...]

setup(props, { emit } ) context.emit
emit('emitName1', {id: 'aabbcc', name: 'Neymar'});



// 부모창에서,
<자식창 이름 @emitName1 = "<부모창에서 받을 함수명>" />
const <부모 함수명> = (emitData) => { ... };

 

 

 

 

 

 

 

 

[props: 부모에서 자식으로 보냄]

// props => 부모에서 자식으로 
// 부모에서 변경된 data는 자식에서 인식하지만, 자식에서 변경된 data는 부모에서 인식하지 못함

// 자식창에서,
props: ['propName']

// Or
props: {
	propname: {
    	type: Array,
        required: true
    }
}


// 자식창에서 부모의 data를 변경할 수 없으므로, (vue에서 하지말래요) 
// @change 등의 이벤트로 emit하여 반환해야함