본문 바로가기

props

(3)
Vue.js) 컴포지션 API - props, context 1. props, contextprops: 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터입니다. 자식 컴포넌트는 전달받은 props를 통해 부모 컴포넌트와 데이터를 공유합니다.context: 컴포넌트의 전체적인 문맥을 나타내며, 주로 attrs, slots, emit 등의 속성을 포함합니다.2. 컴포지션 API props, context 사용// App.vue Hello자식 컴포넌트 MyBtn에 parent 클래스, style 속성, log 메서드를 상속을 합니다.// MyBtn.vue setup 속성에 props와 context를 매개 변수로 하여 불러옵니다. 여기서 주의해야 할 점은 attrs, emit은 기존에 불러오던 방식, $ 기호를 붙여 사용하는 것과 달리 setup 내부에서 호출할 ..
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 삽입미리보..