父组件通过属性向子组件传值
单向数据流，父组件可以向子组件传值，子组件不能向父组件传值
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue</title> 6 </head> 7 <body> 8 <div id="app"> 9 <counter :count="1" @inc="handleIncrease"></counter> 10 <counter :count="2" @inc="handleIncrease"></counter> 11 <div>{{total}}</div> 12 </div> 13 14 <!-- 开发环境版本，包含了用帮助的命令行警activeOne告 --> 15 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 16 <script> 17 var counter = { 18 props: ['count'], 19 data: function() { 20 return { 21 number:this.count 22 } 23 }, 24 template: '<div @click="handleClick">{{number}}</div>', 25 methods: { 26 handleClick: function() { 27 this.number += 2; 28 this.$emit('inc', 2) 29 } 30 } 31 } 32 var app = new Vue({ 33 el: '#app', 34 data: { 35 total: 3 36 }, 37 components: { 38 counter:counter 39 }, 40 methods: { 41 handleIncrease: function(step) { 42 this.total += step 43 } 44 } 45 }) 46 </script> 47 </body> 48 </html>