xuyiping
/
web-demo


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
  <div id="app">
    <counter :count="3" @change="handleCount"></counter>
    <counter :count="2" @change="handleCount"></counter>
    <div>{{total}}</div>
  </div>
  <script>

    var counter = {
      props: ["count"],
      data: function (){
        return {
          number: this.count
        }
      },
      template: '<div @click="handleClick">{{number}}</div>',
      methods: {
        handleClick: function () {
          this.number ++;
          this.$emit('change',1)
        }
      }
    }
    var vm = new Vue({
      el: "#app",
      data: {
        total: 5
      },
      components: {
        counter: counter
      },
      methods: {
        handleCount: function (step){
          this.total += step
        }
      }
    })
  </script>
</body>
</html>