单向数据流

在父组件中，可以直接修改传给子组件的任意数据。

但是子组件中，不能直接修改父组件传过来的数据。如果要修改，需要找一个替身。

<div id = "root">
    <counter :count="1"></counter>
</div>

<script>
// 子组件
let counter = {
    props: ["count"],
    data(){
        return {
            number: this.count // 替身
        }
    },
    // 错误写法：template: "<div @click='handleClick'>{{count}}</div>",
    template: "<div @click='handleClick'>{{number}}</div>",
    methods: {
        // 错误写法：this.count++
        this.number++
    }
}
// 父组件
let vm = new VUe({
    el: "#root",
    components: {
        counter
    }
})
</script>