Vue3 #2

본론

Component

• SFC : Single File Component => Template + Script + Style
• 기본 HTML element를 확장하여 재사용 가능한 코드로 캡슐화
• Vue 컴포넌트는 인스턴스이기도 합니다. 그러므로 모든 옵션 객체를 사용할 수 있습니다. (루트에 사용하는 옵션은 제외)그리고 같은 라이프 사이클 훅을 사용할 수 있습니다.

 

Components 생성

#HTML
<script src="https://unpkg.com/vue@3"></script>

<div id="app">
  // 전역 컴포넌트
  <component-a></component-a>
  // 지역 컴포넌트
  <component-b></component-b>
</div>

#Vue
const {createApp} = Vue;

// 지역 컴포넌트
const componentB = {
  template: `<div>지역 컴포넌트</div>`
}
const app = createApp({
  components:{
    "component-b": componentB
  }
});

// 전역 컴포넌트
app.component("component-a", {
  template: `<div>전역 컴포넌트</div>`
})

app.mount("#app")

 

정리

컴포넌트 구분은 아직은 React, Next.js가 훨씬 편한 느낌입니다.

CDN으로 작업해서 Vite로 개발을 시작하면 또 달라질 수 있을 것 같습니다!!