λ·° μ»΄ν¬λ„ŒνŠΈ

μ»΄ν¬λ„ŒνŠΈλŠ” ν™”λ©΄μ˜ μ˜μ—­μ„ κ΅¬λΆ„ν•˜μ—¬ κ°œλ°œν•  수 μžˆλŠ” 뷰의 κΈ°λŠ₯μž…λ‹ˆλ‹€. μ»΄ν¬λ„ŒνŠΈ 기반으둜 화면을 κ°œλ°œν•˜κ²Œ 되면 μ½”λ“œμ˜ μž¬μ‚¬μš©μ„±μ΄ μ˜¬λΌκ°€κ³  λΉ λ₯΄κ²Œ 화면을 μ œμž‘ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

μ—¬λŸ¬ 개의 μ»΄ν¬λ„ŒνŠΈλ‘œ κ΅¬μ„±λœ ν™”λ©΄μ˜ μ»΄ν¬λ„ŒνŠΈ 관계도

μ»΄ν¬λ„ŒνŠΈ 생성 μ½”λ“œ ν˜•μ‹

μ»΄ν¬λ„ŒνŠΈλ₯Ό μƒμ„±ν•˜λŠ” μ½”λ“œ ν˜•μ‹μ€ μ•„λž˜μ™€ κ°™μŠ΅λ‹ˆλ‹€.

Vue.component('μ»΄ν¬λ„ŒνŠΈ 이름', {
  // μ»΄ν¬λ„ŒνŠΈ λ‚΄μš©
});

μ»΄ν¬λ„ŒνŠΈ 생성 ν›„ ν‘œμ‹œν•˜κΈ°

μœ„ μ½”λ“œ ν˜•μ‹μ„ μ°Έκ³ ν•˜μ—¬ κ°„λ‹¨ν•œ μ•± 헀더 μ»΄ν¬λ„ŒνŠΈλ₯Ό λ§Œλ“€μ–΄λ³΄κ² μŠ΅λ‹ˆλ‹€.

Vue.component('app-header', {
  template: '<h1>Header Component</h1>'
});

μœ„μ—μ„œ λ“±λ‘ν•œ μ»΄ν¬λ„ŒνŠΈλ₯Ό ν™”λ©΄μ—μ„œ ν‘œμ‹œν•˜λ €λ©΄ μ•„λž˜μ™€ 같이 μ»΄ν¬λ„ŒνŠΈ νƒœκ·Έ(μ»΄ν¬λ„ŒνŠΈ 이름)λ₯Ό μΆ”κ°€ν•©λ‹ˆλ‹€.

<div id="app">
  <app-header></app-header>
</div>

div νƒœκ·Έμ— λ·° μΈμŠ€ν„΄μŠ€κ°€ μƒμ„±λ˜μ–΄ μžˆλ‹€λŠ” κ°€μ •ν•˜μ— μœ„ ν…œν”Œλ¦Ώ μ½”λ“œλŠ” 결과적으둜 μ•„λž˜μ™€ 같이 ν‘œμ‹œλ©λ‹ˆλ‹€.

<div id="app">
  <h1>Header Component</h1>
</div>

μ»΄ν¬λ„ŒνŠΈ 등둝 방법 2가지

μ»΄ν¬λ„ŒνŠΈλ₯Ό λ“±λ‘ν•˜λŠ” 방법은 크게 2가지가 μžˆμŠ΅λ‹ˆλ‹€. μ•žμ—μ„œ μ‚΄νŽ΄λ³Έ 방식은 μ „μ—­ μ»΄ν¬λ„ŒνŠΈλ₯Ό λ“±λ‘ν•˜λŠ” λ°©λ²•μž…λ‹ˆλ‹€.

// μ „μ—­ μ»΄ν¬λ„ŒνŠΈ 등둝
Vue.component('app-header', {
  template: '<h1>Header Component</h1>'
});

또 λ‹€λ₯Έ 방법은 지역 μ»΄ν¬λ„ŒνŠΈλ‘œ λ“±λ‘ν•˜λŠ” 방법이 μžˆμŠ΅λ‹ˆλ‹€. μ•žμ—μ„œ μ‚¬μš©ν•œ μ»΄ν¬λ„ŒνŠΈ λ‚΄μš©μ„ 가지고 κ·ΈλŒ€λ‘œ 지역 μ»΄ν¬λ„ŒνŠΈλ‘œ λ“±λ‘ν•˜λ©΄ μ•„λž˜μ™€ κ°™μŠ΅λ‹ˆλ‹€.

var appHeader = {
  template: '<h1>Header Component</h1>'
}

new Vue({
  components: {
    'app-header': appHeader
  }
})