VUE3 뷰 컴포넌트 통신 컴포넌트 통신 컴포넌트는 상하위로 관계가 생긴다. 컴포넌트는 각자 고유한 유효 범위를 가지고 데이터도 각각 가지고 있다. 이 데이터를 공유하려면 props와 event 속성을 사용하면 된다. 부모는 자식에게 props(데이터) 속성을 전달하고, 자식은 부모에게 evnet를 전달한다. 왜 부모-자식으로 통신 영역을 제한하는가? 각 컴포넌트가 마음대로 데이터를 주고 받는다면 에러 발생시에 추적하기 어렵게 된다. 뷰는 데이터가 아래로만 내려간다. 이 규칙은 데이터를 흐름을 추적할 수 있게 해준다. 2023. 8. 22. Emit Emit 에밋 emit은 발산, 내뿜다라는 뜻이 있다. 하위 컴포넌트가 상위 컴포넌트와 통신 하기위해서는 하위에서 이벤트를 발생시켜 상위로 올린다. 이벤트를 올릴 때 사용하는 것이 $emit()이다. emit은 뷰에서 제공하는 api(기능)이다. v-on:하위 컴포넌트 이벤트="실행할 상위 컴포넌트 메소드" var appHeader = { template: 'Click me', // 버튼을 클릭했을 때 실행될 함수(메소드) passEvent methods: { passEvent: function() { this.$emit('pass'); // 상위로 보낼 이벤트 pass } } } new Vue({ el: '#app', components: { 'app-header': appHeader }, method.. 2023. 1. 5. 뷰 인스턴스 Reactivity 반응성 데이터의 변화가 있으면 새로고침 없이 변화를 감지해서 반응하는 것 뷰 인스턴스 new Vue() 형태로 생성한 객체 Vue로 개발할 때 필수로 생성해야하는 생성자 필요한 기능을 생성자에 미리 정의해 두고 그 기능을 재정의하여 사용함 뷰 인스턴스를 참고하기 위한 변수로 vm을 자주 사용(VeiwModel의 줄임말) var vm = new Vue() vm으로 Vue 라이브러리는 사용할 수 있음 인스턴스란? 프로그램에서 객체를 실체화한 것 = 실제로 동작할 것 실체화된 인스턴스는 메모리에 할당됨 var vm = new Vue({ // options }) vm 변수에 인스턴스를 담으면 new에 의해 메모리에 빈 공간이 생성된다. 생성자 함수 객체 리터럴 {...}을 사용하면 객체를 만.. 2022. 11. 12. 이전 1 다음 반응형