webs
/
index3.html

<!DOCTYPE html>
<html>
  <head>
    <title>testzishan</title>
    <style type="text/css"></style>
    <meta charset="UTF-8">
    <script src="./vue.js"></script>
    <body>

      <div id="app">
        <counter ref="one" @change="handletotal"></counter>
        <counter ref="two" @change="handletotal"></counter>
        综合：{{total}}
      </div>
      <script>
        Vue.component("counter",{
          template:"<div @click='handelCounter'>{{content}}</div>",
          data(){
            return{
              content:0
            }
          },
          methods:{
            handelCounter(){
              this.content++;
              this.$emit('change')
            }
          }
        });

        let app = new Vue({
          el:'#app',
          data:{
            message: "hello world",
            total:0
          },
          methods:{
            handletotal(){
              console.log(this.$refs.one)
              this.total = this.$refs.one.content+this.$refs.two.content
            }
          }
        });

      </script>
    </body>
  </head>
</html>