props 속성

ν”„λ‘­μŠ€ 속성은 μ»΄ν¬λ„ŒνŠΈ 간에 데이터λ₯Ό 전달할 수 μžˆλŠ” μ»΄ν¬λ„ŒνŠΈ 톡신 λ°©λ²•μž…λ‹ˆλ‹€. ν”„λ‘­μŠ€ 속성을 κΈ°μ–΅ν•  λ•ŒλŠ” μƒμœ„ μ»΄ν¬λ„ŒνŠΈμ—μ„œ ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈλ‘œ λ‚΄λ €λ³΄λ‚΄λŠ” 데이터 μ†μ„±μœΌλ‘œ κΈ°μ–΅ν•˜λ©΄ μ‰½μŠ΅λ‹ˆλ‹€.

props 속성 μ½”λ“œ ν˜•μ‹

props 속성을 μ‚¬μš©ν•˜κΈ° μœ„ν•΄μ„œλŠ” ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈμ˜ μ»΄ν¬λ„ŒνŠΈ λ‚΄μš©κ³Ό μƒμœ„ μ»΄ν¬λ„ŒνŠΈμ˜ ν…œν”Œλ¦Ώμ— 각각 μ½”λ“œλ₯Ό μΆ”κ°€ν•΄μ€˜μ•Ό ν•©λ‹ˆλ‹€.

// ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈμ˜ λ‚΄μš©
var childComponent = {
  props: ['ν”„λ‘­μŠ€ 속성 λͺ…']
}
<!-- μƒμœ„ μ»΄ν¬λ„ŒνŠΈμ˜ ν…œν”Œλ¦Ώ -->
<div id="app">
  <child-component v-bind:ν”„λ‘­μŠ€ 속성 λͺ…="μƒμœ„ μ»΄ν¬λ„ŒνŠΈμ˜ data 속성"></child-component>
</div>

props 속성 μ½”λ“œ μ˜ˆμ‹œ

그럼 μœ„μ˜ μ½”λ“œ ν˜•μ‹μ„ μ°Έκ³ ν•˜μ—¬ μ‹€μ œ ν”„λ‘­μŠ€ 속성을 κ΅¬ν˜„ν•œ μ½”λ“œλ₯Ό λ³΄κ² μŠ΅λ‹ˆλ‹€.



Β 










Β 



// ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈ : childComponent
var childComponent = {
  props: ['propsdata'],
  template: '<p>{{ propsdata }}</p>'
}

// μƒμœ„ μ»΄ν¬λ„ŒνŠΈ : root μ»΄ν¬λ„ŒνŠΈ
new Vue({
  el: '#app',
  components: {
    'child-component': childComponent
  },
  data: {
    message: 'hello vue.js'
  }
})

Β 



<div id="app">
  <child-component v-bind:propsdata="message"></child-component>
  <!-- μœ„μ˜ 좜λ ₯ κ²°κ³ΌλŠ” hello vue.js -->
</div>