1.单向数据流的概念：父组件可以通过属性的显示向子组件传递参数，传递过的参数可以随意的修改（也就是父组件可以向子组件随意的传递参数），子组件却不能反过来去修改父组件传过来的参数。

之所以Vue有单向数据流的概念，是因为如果父组件传递过来的是引用类型的数据，而不是基本类型的数据，当在子组件改变了传递过来的内容，也可能接收的这个引用类型的数据还被其他的组件所使用，这样的话，子组件改了这个数据，不仅仅影响了这一个组件，很有可能对其他子组件造成影响。
所以，子组件不能改变父组件的数据

完整代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12 父子组件的数据传递</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <counter :num='11' @add='handleAdd'></counter>
        <counter :num='12' @add='handleAdd'></counter>
        <div>{{total}}</div>
    </div>

    <script>
        var counter = {
            props: ['num'],
            data: function () {
                return {
                    // 从父组件接收到了num这个数据，把num数据复制一份到子组件自己的data里面，就可以用子组件自己的numChange
                    numChange: this.num
                }
            },
            template: '<div @click="handleClick">{{numChange}}</div>',  //用子组件自己的numChange
            methods: {
                handleClick: function () {
                    //this.num ++  // 能够加 但是会[Vue warn]，因为改了父组件传过来的内容
                    this.numChange = this.numChange + 2
                    this.$emit('add', 2)
                }
            },
        }

        var vm = new Vue({
            el: "#app",
            data: {
                total: 23
            },
            methods: {
                handleAdd(step) {
                    this.total += step
                }
            },
            components: {
                counter,
            }
        })
    </script>
</body>

</html>