vue组件中数据的传递

父组件通过props向下传递数据
子组件交内部变化向上通知到父组件，通过events接口

所谓 “隔离作用域”，即不能在子组件中直接引用父组件的数据
子组件通过props显示声明从而成功接收从父组件传递来的数据

所谓“单向数据流”，即自上至下单向流动，父级件属性更新，子组件属性会同步；但是当子组件属性更新时，父组件属性不会同步；
这种机制防止子组件意外改变父组件的状态，一旦这么做，console 会 warning
当需要props作用一个局部数据或需要转换的值时，赋到data 或computed中

Props验证：定义为一个带有验证要求的对象

费话不多说，上代码

<div id='counter'>  <span>counter: {{counter}}</span>  <br/>  <button-counter :counter="counter" text="plus" v-on:change="update"></button-counter>  <button-counter :counter="counter" text="subtract" v-on:change="update"></button-counter></div>

Vue.component('button-counter', {  template: '<button @click="next">{{text}}</button>',  props: {    counter: {      type: Number,      default: 0    },    text: {      type: String,      default: 'plus',      required: true    }  },  data: function() {    return {      value: this.counter    }  },  methods: {    next: function() {      this.$emit('change', this.text == 'plus' ? '+' : '-');    }  }})new Vue({  el: '#counter',  data: {    counter: 10  },  methods: {    update: function(symbol) {      this.counter = eval(this.counter + symbol + '1');    }  }})