개발/vue (4) 썸네일형 리스트형 Vue 3에서 컴포넌트 간 데이터 변동을 감지하고 관리하는 주요 방법들 Vue 3는 컴포넌트 간 통신을 위한 다양한 방법을 제공합니다. 오늘은 부모 컴포넌트와 자식 컴포넌트 사이에서 데이터 변동을 감지하는 주요 방법들에 대해 알아보겠습니다.1. Props와 Emits부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하고, 자식에서 부모로 이벤트를 전달합니다. 부모 컴포넌트: 자식 컴포넌트: {{ message }} Send Update 2. v-model컴포넌트에서 간단한 양방향 바인딩을 구현할 때 사용합니다. 부모 컴포넌트: 입력값: {{ inputValue }} 자식 컴포넌트 (CustomInput): 3. provide/inject깊은 컴포넌트 트리에서 데이터를 전달할 때 유용합니다. 최상위 컴포넌트: 깊이 중첩된 자식 컴포넌트: {{ sh.. countdown timer 설정 {{ elapsedTime }} Vue 3.0에서 타입스크립트 사용하기 타입스크립트는 정적 타입을 지원하여 개발자가 더욱 안정적이고 예측 가능한 코드를 작성할 수 있게 도와줍니다. Vue 3.0은 기본적으로 타입스크립트를 지원하므로, 이제는 더욱 간편하게 타입스크립트를 사용할 수 있습니다. 1. 프로젝트 설정 Vue CLI를 사용하여 Vue 3.0 프로젝트를 생성합니다. 터미널에서 다음 명령어를 실행하세요: vue create my-vue-app 생성된 프로젝트 폴더로 이동한 후, 타입스크립트 옵션을 선택합니다. 이후 필요한 설정을 입력하면 타입스크립트가 자동으로 프로젝트에 추가됩니다. 2. 컴포넌트 작성 타입스크립트로 작성된 Vue 컴포넌트를 생성해보겠습니다. `HelloWorld.vue` 파일을 생성하고 다음과 같이 작성합니다: {{ greeting }} Click me.. [Vue] Component 재사용 export default { path: '/test', component: () => Layout, children: [ {path: 'path1', component: () => Listcomponent}, {path: 'path2', component: () => Listcomponent}, ] } path만 다르게 해서 하나의 컴포넌트를 재사용할 때, 컴포넌트가 업데이트되지 않는 문제 발생. router-view에 key 속성을 추가하여 path로 컴포넌트를 식별하도록 해줌으로써 해당 컴포넌트를 동일요소가 아닌 다른 요소로 인식하여 컴포넌트 데이터가 업데이트된다. key는 이름답게 고유해야만 렌더링 오류를 방지할 수 있다. key 속성 참고.. https://v2.vuejs.org/v2/api/#.. 이전 1 다음
