## 传值 父组件通过属性的方式向子组件传递数据. vue中有单向数据流的概念,父组件可以向子组件传值,子组件只能去用这个数据,但是不要去修改父组件传递过来的值. 子组件通过this.$emit()向父组件传值. ``` <div id="app"> <counter :number="1" @change="add"></counter> <counter :number="1" @change="add"></counter> {{total}} </div> <script> var counter = { props: ['number'], data: function () { return { n: this.number, }; }, template: ` <div> {{n}} <input type="button" value="add" @click="add"> </div> `, methods: { add: function () { this.n += this.number; this.$emit('change', 1); } } }; new Vue({ el: '#app', data: { total: 2, }, components: { counter, }, methods: { add: function (value) { this.total += value; } } }) </script> ```