JSFiddle - React, Tailwind, and code Playground

by edith_tang

HTML

<div id="app">
  <p>
  总数： {{ total }}
  </p>
  <my-component
    @increase="handleGetTotal"
    @decrease="handleGetTotal"></my-component>
</div>

CSS

button {
  border-radius: 50%;
  width: 33px;
  height: 33px;
  border: none;
  background-color: skyblue;
  color: #fff;
  font-weight: bold;
}

JavaScript

Vue.component('my-component', {
	template: '\
  <div>\
  	<button @click="handleIncrease">+ 1</button>\
    <button @click="handleDecrease">- 1</button>\
	</div>',
  data: function() {
  	return {
    	counter: 0
    }
  },
  methods: {
  	handleIncrease: function() {
    	this.counter++;
      this.$emit('increase', this.counter);
    },
    handleDecrease: function() {
    	this.counter--;
      this.$emit('decrease', this.counter);
    }
  }
})

var app = new Vue({
	el: '#app',
  data:{
  	total: 0
  },
  methods: {
  	handleGetTotal: function(total) {
    	this.total = total;
    }
  }
})