JSFiddle - React, Tailwind, and code Playground

by eglowc

HTML

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="app">
  <bow @bark="goodboy"></bow>
</div>

<!-- 
  $emit 을 사용하면 부모에서 생성한 사용자정의 이벤트를 호출할 수 있다.
  `this.$emit('bark')` 로 상위에서 `bark` 이벤트가 발생하도록 만들었고,
  그 이벤트가 발생할 때 상위에서 `goodboy`를 호출하도록 되어 있다.
-->

JavaScript

Vue.component("bow", {
  template: '<input type="text" @keydown.enter="enter"/>',
  methods: {
    enter(e) {
    	console.log(e)
			this.$emit('bark', e.target.value)
    }
  }
})

var app = new Vue({
  el: "#app",
  methods: {
    goodboy(sound) {
      alert(sound)
    }
  }
})