4-2父子组件传值 · 武功秘籍大全

~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父子组件传值</title> <script src="vue.js"></script> </head> <body>     <div id="root"> <counter :count="3" @inc="handleInc"></counter> <counter :count="2" @inc="handleInc"></counter> <div>{{total}}</div> </div> <script> var counter = { props: ['count'], data() { return { number: this.count } }, template: '<div @click="handleClick">{{number}}</div>', methods: { handleClick() { // this.number++ // this.$emit('inc', 1) this.number += 2 this.$emit('inc', 2) } } } var vm = new Vue({ el: '#root', data: { total: 5 }, components: { counter: counter }, methods: { handleInc(step) { this.total += step } } }) </script> </body> </html> ~~~