1、父组件如何向子组件传递数据
<div id="root"> <counter :count="0"></counter> <counter :count="1"></counter> </div> <script> var counter = { props: ['count'], template:'<div @click="handleClick">{{count}}</div>', data: function() { return { number : this.count } }, methods: { handleClick: function() { this.number++ } } } var vm = new Vue({ el:"#root", data: { total: 0 }, components: { counter:counter }, }) </script>
2、子组件向父组件传值
<div id="root"> <counter :count="0" @change="handleChange"></counter> <counter :count="1" @change="handleChange"></counter> <div>{{total}}</div> </div> <script> var counter = { props: ['count'], template:'<div @click="handleClick">{{count}}</div>', data: function() { return { number : this.count //父子组件传值有单向数据流的规定,不可以直接改变父组件传过来的值 } }, methods: { handleClick: function() { this.number++; this.$emit('change',1) } } } var vm = new Vue({ el:"#root", data: { total: 0 }, components: { counter:counter }, methods: { handleChange: function(step) {//step指步长 // this.total = this.$refs.one.number + this.$refs.two.number; this.total += step } } }) </script>