이벀트 λ°œμƒ

이벀트 λ°œμƒμ€ μ»΄ν¬λ„ŒνŠΈμ˜ 톡신 방법 쀑 ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈμ—μ„œ μƒμœ„ μ»΄ν¬λ„ŒνŠΈλ‘œ ν†΅μ‹ ν•˜λŠ” λ°©μ‹μž…λ‹ˆλ‹€.

이벀트 λ°œμƒ μ½”λ“œ ν˜•μ‹

ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈμ˜ λ©”μ„œλ“œλ‚˜ 라이프 사이클 ν›…κ³Ό 같은 곳에 μ•„λž˜μ™€ 같이 μ½”λ“œλ₯Ό μΆ”κ°€ν•©λ‹ˆλ‹€.

// ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈμ˜ λ‚΄μš©
this.$emit('이벀트 λͺ…');

그리고 λ‚˜μ„œ ν•΄λ‹Ή 이벀트λ₯Ό μˆ˜μ‹ ν•˜κΈ° μœ„ν•΄ μƒμœ„ μ»΄ν¬λ„ŒνŠΈμ˜ ν…œν”Œλ¦Ώμ— μ•„λž˜μ™€ 같이 κ΅¬ν˜„ν•©λ‹ˆλ‹€.

<!-- μƒμœ„ μ»΄ν¬λ„ŒνŠΈμ˜ ν…œν”Œλ¦Ώ -->
<div id="app">
  <child-component v-on:이벀트 λͺ…="μƒμœ„ μ»΄ν¬λ„ŒνŠΈμ˜ μ‹€ν–‰ν•  λ©”μ„œλ“œ λͺ… λ˜λŠ” μ—°μ‚°"></child-component>
</div>

이벀트 μ½”λ“œ μ˜ˆμ‹œ

그럼 μœ„μ˜ μ˜ˆμ‹œ μ½”λ“œλ₯Ό μ°Έκ³ ν•˜μ—¬ κ°„λ‹¨ν•œ 이벀트 λ°œμ‹ , μˆ˜μ‹  μ½”λ“œλ₯Ό μ§œλ³΄κ² μŠ΅λ‹ˆλ‹€.





Β 











Β 





// ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈ : childComponent
var childComponent = {
  methods: {
    sendEvent: function() {
      this.$emit('update');
    }
  }
}

// μƒμœ„ μ»΄ν¬λ„ŒνŠΈ : root μ»΄ν¬λ„ŒνŠΈ
new Vue({
  el: '#app',
  components: {
    'child-component': childComponent
  },
  methods: {
    showAlert: function() {
      alert('event received');
    }
  }
})

Β 


<div id="app">
  <child-component v-on:update="showAlert"></child-component>
</div>

μœ„ μ½”λ“œλŠ” ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈμΈ childComponentμ—μ„œ sendEvent() λ©”μ„œλ“œκ°€ μ‹€ν–‰λ˜λ©΄ updateλΌλŠ” μ΄λ²€νŠΈκ°€ λ°œμƒλ˜κ³ , 이λ₯Ό μƒμœ„ μ»΄ν¬λ„ŒνŠΈμΈ 루트 μ»΄ν¬λ„ŒνŠΈμ˜ v-on λ””λ ‰ν‹°λΈŒλ‘œ 이벀트λ₯Ό λ°›μ•„ showAlert() λ©”μ„œλ“œλ₯Ό μ‹€ν–‰ν•˜λŠ” μ½”λ“œμž…λ‹ˆλ‹€.

μ‹€ν–‰ κ²°κ³ΌλŠ” event received λΌλŠ” 경고창이 ν‘œμ‹œλ©λ‹ˆλ‹€.