VUE 父子组件数据传递

一、 父子组件间传值[props]

1. 父组件向子组件传递数据：通过属性传递数据；子组件通过props接收数据。

<div id='root'>
    <counter :count="0"></counter>
</div>
var counter = {
    props: ['count'],
    template: '<div>{{count}}</div>'
}
var ue = new Vue({
    el : '#root',
    components:{
        counter:counter
    }
}) 

父组件通过属性的形式向子组件传递一个数据；

子组件使用props接收这个数据，即props:['xxx']，子组件在模板template使用传递过来的数据。

二、 子组件向父组件传值

场景的需求： 实现一个计数器，每次都增加2，并求和。

问题的要求： 让子组件每次点击时，调用父组件的求和方法。

实现的方法： 子组件向父组件传值，通过事件的形式,即this.$emit('事件' , 步长)来告知父组件新增的参数值；父组件则在页面模板的dom标签添加一个监听事件，即@事件名="执行方法名"，那么子组件做了修改的话，在父组件就能监听到改变，然后在页面就会做出相应的改变。

<div id="root">
    <counter :count="0" @add="handleAdd"></counter>+
    <counter :count="0" @add="handleAdd"></counter>= 
    <div>{{total}}</div> 
</div>

var counter = { 
    props: ['count'],
    template: '<div @click="handleClick">{{count}}</div>', 
    methods: { 
            handleClick: function() {
                    this.number = this.number + 2,
                    this.$emit('add', 2) 
            }
        }
      }

      var vm = new Vue({ 
          el: "#root",
          data: { 
                 total: 0 
            },
          components: { 
                  counter: counter 
          },
           methods: {
                    handleAdd: function(step) { 
                            this.total += step 
                    }
                }
            })

知识点：  Vue单向数据流。父组件可以向子组件通过属性形式传递参数，传递的参数也可以随时随意修改；但子组件不能修改父组件传递过来的参数。只能用父组件传递的数据。

原因：  因为子组件接收父组件传递过来的数据，并不是一个基础类型的数据类型，而是类似于object这种引用类型的数据类型。如果修改了引用类型的数据，在使用子组件时，则会造成其他子组件接收数据的错误。

单向数据流

单向数据流的意思是指数据的改变只能从一个方向修改，指的是组件之间的数据流动。