Vue 中父子组件数据传递

父组件 -> 子组件 传递数据

父组件 -> 子组件传递数据，可以通过属性的形式

<div id="root">
    <counter :count="0"></counter>      //:counter 获取到的是数字，counter 获取到的是字符串
    <counter :count="1"></counter>
</div>
let counter = {
    props:['count'],                //子组件 接收 父组件传递过来的内容
    template: '<div>{{count}}</div>',   //模版中就可以使用这个数据了
}
let vm = new Vue({
    el: '#root',
    components:{
        counter
    }        
})

组件中 :counter=“1” 获取到的是数字， counter=“1” 获取到的是字符串，因为加了冒号后，后面值就是 js 表达式了，它就不是字符串了。它是一个 js 表达式，当然就是数字类型了。

父组件通过属性的形式，向 counter 这个子组件传递了一个名字叫做 counter 的数据，子组件需要接收一下才能使用这个数据。

在 Vue 当中，父组件 -> 子组件 传值，都是通过属性的形式传递的。

子组件 修改 传递数据

<div id="root">
    <counter :count="0"></counter> 
    <counter :count="1"></counter>
</div>
let counter = {
    props:['count'],
    template: '<div @click="handleClick">{{count}}</div>',
    methods: {
        handleClick(){
            this.count ++
        }
    }
}
let vm = new Vue({
    el: '#root',
    components:{
        counter
    },    
})

直接操作父组件传递过来的值，用是可以用的，但是打开控制台后，会发现 Vue 有个警告：你不要直接修改父组件传递过来数据，如下图：

这是为什么呢？

在 Vue 当中有个单向数据流的概念，也就是父组件可以向子组件通过属性的形式传递参数，你传递的参数可以随便修改，也就是说父组件可以随意的向子组件随意的传递参数，但是子组件绝对不能反过来去修改父组件传递过来的参数。

之所有 Vue 之中有单项数据流的概念，原因在于，一旦你的子组件接受的数据不是基础类型时，例如对象，也就是引用类型的数据时，你在子组件里面改变了传递过来的数据，有可能这个数据还被其他子组件使用，这样你这个子组件改了这个数据，不仅仅影响你你这个组件，还可能对其他的子组件造成影响。

所以 Vue 里面说，我有一个单向数据流，你子组件不能改变父组件传递给你的数据，那该怎么办呢？

看下面代码

<div id="root">
    <counter :count="0"></counter> 
    <counter :count="1"></counter>
</div>
let counter = {
    props:['count'],
    data(){
        return {
            number: this.count
        }
    },
    template: '<div @click="handleClick">{{number}}</div>',
    methods: {
        handleClick(){
            this.number ++
        }
    }
}
let vm = new Vue({
    el: '#root',
    components:{
        counter
    },    
})

在子组件中用 data 接收下父组件传递过来的参数，用 number 来保存，页面中显示也用 number ，点击子组件时只需修改 number 就可以了。

子组件 -> 父组件 传递数据

<div id="root">
    <counter :count="2" @inc="handleIncrease"></counter>
    <counter :count="3" @inc="handleIncrease"></counter>
    <div>{{total}}</div>
</div>
let counter = {
    props:['count'],
    data(){
        return {
                number: this.count
            }
    },
    template: '<div @click="handleClick">{{number}}</div>',
    methods:{
        handleClick(){
            this.number = this.number + 2
                this.$emit('inc', 2)
        }
    }
}
let vm = new Vue({
    el: '#root',
    components: {
        counter
    },
    data: {
        total:5
    },
    methods: {
        handleIncrease(step) {
            this.total += 2
        }
    }
})

当我点击组件时， handleClick 会被触发， number 会被改变， number 改变时，用 this.$emit 触发 inc 事件， counter 组件中监听 inc 事件，执行函数 handleIncrease ，在函数中对 total 操作。

父组件通过属性的形式向子组件传值，子组件通过事件触发的形式向父组件传值，而且父子组件传值的时候还有一个隐性的规定，也就是单向数据流。父组件可以向子组件传递任何的数据，但是子组件不能修改父组件传递过来的数据，如果你一定要修改，就需要拷贝一个副本出来，你去用这个副本，修改这个副本就可以了。