【Vue】父子组件间如何通信（数据传递）

前言：组件间总是会有，数据进行传递的情况，父组件->子组件，子组件->父组件。下面具体说一下用法

第一种：父组件->子组件

父组件通过 :area 方式，将 areaData 的数据传递给子组件。

<div id="todo-list-example">
    <item :cons="5"></item>
    <item :cons="3"></item>
</div>
<script>
    Vue.component('item', {
        props:['cons'],
        data: function(){
            return{
                number: this.cons
            }
        },
        template: '<div @click="handleClick">{{number}}</div>',
        methods:{
            handleClick:function(){
                this.cons += 1 //子组件操作父组件传递的值会报错
                this.number += 1 //正确用法
            }
        }
    })
</script>

子组件通过 props接收 父组件传递的数据。

单项数据流，就是子组件可以接收父组件传递的数据，但不能修改。为了避免污染数据源，因为父组件传递的数据也可能被其他子组件所使用。 我们可以将接收到的数据赋值给其他参数，进行修改。

操作父组件传递的数据报错：

报错翻译：避免直接修改prop，因为当父组件重新渲染时，该值将被覆盖。推荐使用：基于道具值的数据（赋值）或计算属性。

:cons 和 cons 的区别

在上边的实例中，使用两种形式都可以满足需求。:cons 是 v-bind:cons 的简写，告知 v-bind 指令，将 cons 属性与“=”后的js表达式绑定。 cons 则不会响应式的更新数据。

第二种：子组件 -> 父组件

子组件通过 this.$emit('方法名'，'数据') 将数据传递给父组件

父组件执行 @change="handleChange"，handleChange 方法的参数 step，就是子组件传递过来的数据。

<div id="todo-list-example">
    <item @change="handleChange" :cons="5"></item>
    <item @change="handleChange" :cons="3"></item>
    <div>{{message}}</div>
</div>
<script>
    Vue.component('item', {
        props:['cons'],
        data: function(){
            return{
                number: this.cons
            }
        },
        template: '<div @click="handleClick">{{number}}</div>',
        methods:{
            handleClick:function(){
                this.number += 2
                this.$emit('change', 2)
            }
        }
    })
    var vm= new Vue({
        el: '#todo-list-example',
        data: {
            message: 8,
        },
        methods:{
            handleChange:function(step){
                this.message += step
            }
        }
    })
</script>

 this.$emit('change', max, min，…) 参数个数没有限制

以上。