본문 바로가기

composition api

(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) 컴포지션API - 기본 옵션과 라이프 사이클 1.  data// App.vue {{ count }} {{ message }}// App.Composition.vue {{ count }} {{ message }}0Hello world!" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 data에 정의할 때 컴포지션 API에서는 ref를 import 하고 ref 매개변수에 초기값을 설정해 줍니다. 그리고 return 부분에 선언한 데이터를 return 해줍니다. 2. methods // App.vue {{ count }} {{ message }}// App.Composition.vue {{ count }} {{ message }}메서드 호출 전0Hello world!메서드 호출 후1Good!" data-ke-type="html..
Vue.js) 컴포지션API - 반응형 데이터 1. 컴포지션 APIVue.js에서 컴포지션 API(Composition API)는 Vue3에서 도입되었으며, 복잡한 로직을 보다 모듈화 하고 재사용 가능하게 만드는 데 도움이 됩니다. 컴포지션 API는 주로 setup 함수를 통해 사용됩니다.setupsetup 함수는 Vue 컴포넌트의 초기 단계에서 호출되며, props와 context를 인자로 받을 수 있습니다. 내부에서 반응형 상태, 라이프 사이클 훅 등을 정의할 수 있습니다.반응형 상태ref: 단일 값의 반응형 상태를 생성합니다.reactive: 객체의 반응형 상태를 생성합니다.computedcomputed 함수를 사용하여 종속성에 따라 자동으로 업데이트 되는 계산된 속성을 정의합니다.watchwatch 함수를 사용하여 특정 데이터의 변화를 감지하..