Components (3) 썸네일형 리스트형 Vue.js) 컴포넌트 - Emit 1. EmitVue.js의 emit은 부모-자식 컴포넌트 간의 통신을 처리하는 중요한 메커니즘입니다. 자식 컴포넌트에서 이벤트를 발생시키고, 부모 컴포넌트가 해당 이벤트를 수신하여 처리할 수 있습니다. 이를 통해 부모 컴포넌트와 자식 컴포넌트 간의 데이터 흐름을 관리할 수 있습니다. 2. 부모 컴포넌트에서 메서드 상속// App.vue // MyBtn.vue parentemits 속성에 부모 컴포넌트에서 상속하는 함수명을 배열형식으로 정의해 주고 이벤트를 호출할 엘리먼트에서@['event']="$emit(["parent event"])" 라고 명시하면 됩니다. 2. 부모 컴포넌트에서 매개변수 있는 메서드 상속// App.vue // MyBtn.vue parameter위처럼 매개 변수가 존재하는 함수를 호.. Vue.js) 컴포넌트 - 속성 상속 1. 속성 상속Vue.js에서 컴포넌트는 부모-자식 관계로 구성될 수 있으며, 자식 컴포넌트는 부모 컴포넌트로부터 다양한 속성이나 메서드를 상속받을 수 있습니다. Vue.js는 컴포넌트 간의 속성 상속을 지원하지 않지만, 대신에 props를 통해 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있습니다. 2. 상속받는 자식 컴포넌트의 루트가 하나일 때// App.vue Banana // MyBtn.vue 부모 컴포넌트 App에서 자식 컴포넌트 MyBtn에 parent 클래스를 상속이 이루어졌음을 확인할 수 있습니다. 3. 상속받는 자식 컴포넌트의 루트가 여러 개일 때// App.vue Banana // MyBtn.vue Hello Vue 첫 번째 경우와는 다르게 상속받는 자식 컴포넌.. Vue.js) 컴포넌트-기초 1. 컴포넌트Vue.js 컴포넌트는 Vue 애플리케이션의 재사용 가능한 코드 조각으로, 각각의 컴포넌트는 독립적인 뷰 및 로직을 가집니다. 컴포넌트는 더 큰 애플리케이션을 작은, 관리 가능한 부분으로 나누어 개발할 수 있게 해 줍니다. 2. components와 propsprops: 부모 컴포넌트로부터 데이터를 전달받기 위한 속성을 정의합니다.// App.vue Slot 미사용 Slot 사용 Banana Apple Cherry Melon Melon // MyBtn.vue {{ text }} // MyBtn2.vue Slot 미사용BananaAppleCherryMelonSlot 사용BananaAppleCherryMelonMelon" data-ke-type="html">HTML 삽입미리보.. 이전 1 다음
