JSFiddle - React, Tailwind, and code Playground

by SUNGMIN SHIN

HTML

<template id="food">
  <!-- v-on(@)을 통해 click시 vote(voted내부에서는 voted를 실행)가 실행되도록 설정 -->
  <button @click="vote">{{ name }}</button>
</template>
<!-- // #food -->



<div id="container">
  <p>
    {{ votes }}
  </p>
  <!-- voted를 countVote로 설정 -->
  <food name="투표" @voted='countVote'></food>
</div>
<!-- // #container -->

JavaScript

// #food
Vue.component('food', {
	template: '#food',
  props: ['name'],
  methods: {
  	vote: function() {
    	// 인스턴스 이벤트 $emit을 통해 'voted'를 실행(voted의 위치를 유심히 볼 것)
    	this.$emit('voted');
    }
  }
})

new Vue({
	el: '#container',
  data: {
  	votes: 0
  },
  methods: {
  	countVote: function() {
    	this.votes++
    }
  }
})