grace's dev_note

  • 홈
  • 태그
  • 방명록

dynamic component 1

[Vue3] Dynamic component

동적 컴포넌트 (Dynamic Component) 컴포넌트를 동적으로 변경하고 싶을 때 v-bind:is 속성을 사용해서 변경할 수 있습니다. 동적 컴포넌트는 탭 인터페이스와 같이 컴포넌트간에 동적으로 전환해야 할 때 유용합니다. 위 예시에서 :is 속성에 전달된 값은 다음 중 하나를 포함할 수 있습니다. 등록된 컴포넌트의 문자열 이름 string 실제 가져온 컴포넌트 객체 object 를 사용하여 여러 컴포넌트간 전환하면 컴포넌트의 마운트가 매번 해제됩니다. 이때 내장 컴포넌트를 사용하여 “비활성 컴포넌트"들의 “활성” 상태를 유지할 수 있도록 강제할 수 있습니다. 다음은 vue3에서 script setup을 사용한 동적 컴포넌트 사용 예제입니다. {{ menu.name }} // 컴포넌트 '이름'이 ..

FrontEnd/Vue 2023.04.17
이전
1
다음
더보기
프로필사진

기술 및 회고 블로그

  • 분류 전체보기
    • 회고
    • FrontEnd
      • Next.js
      • React
      • ReactNativ..
      • Vue
    • Javascript
      • 러닝 자바스크립트
      • 모던 자바스크립트
    • CS
    • DataScienc..
      • Data Struc..
      • LeetCode
    • BackEnd
      • Express
      • Node.js
      • Nest.js
    • DevOps
      • Docker
    • 코드캠프

Tag

node.js, Vue3, Vite, PostgreSQL, React Native, postgres, Vue.js, 자바스크립트, javascript, pinia, nest.js, 알고리즘, vue-query, Vue, Express, backend, 함수, 번들러, tanstack, vitejs,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2025/07   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

티스토리툴바