父子组件传值

• 父组件通过属性的形式向子组件传值，子组件通过 props 接收
• 单向数据流：父组件可以随意的向子组件传递参数，但是子组件绝对不能反过来修改父组件传过来的参数。（如果父组件传过来的是引用类型数据，当子组件修改父组件传过来的值，有可能影响到其他也使用该引用类型数据的子组件）
• 子组件可以克隆（在子组件 data 中定义 son: this.parent ）出父组件传过来的参数进行修改
• 子组件通过触发（ this.$emit() ）父组件事件向外传值

  <div id="app">
    <!-- 父组件通过绑定属性 count 向子组件传值 -->
    <counter :count="1" @watch="addCounts"></counter>
    <counter :count="2" @watch="addCounts"></counter>
    <div>{{total}}</div>
  </div>
  <script>
    var counter = {
      props: ["count"], // 子组件通过 props 接收父组件的传值
      data: function(){ // 子组件中 data 必须是一个方法，不能是对象
        return {
          num: this.count // 通过克隆的方式修改父组件传值，即不直接修改父组件值（单向数据流）
        }
      },
      template: "<div @click='add'>{{num}}</div>",
      methods: {
        add: function(){
          this.num = this.num + 2
          this.$emit("watch", 2) // 子组件通过 this.$emit() 触发父组件事件，第二个参数为所携带值
        }
      }
    }
    var vm = new Vue({
      el: "#app",
      data: {
        total: 3
      },
      components: {
        counter: counter
      },
      methods: {
        addCounts: function(value){
// 此时 value 就是子组件通过 this.$emit() 传过来的第二个参数
          this.total = this.total + 2
        }
      },
    })
  </script>