Vue中父組件向子組件傳值——單項數據流

父組件可以向子組件通過屬性的形式來傳遞參數，傳遞的參數可以隨便的進行修改。但是子組件絕對不能反過來去修改父組件傳遞過來的參數。

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

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

意思是每點擊div，他的值會++，測試時發現，雖然他的效果可以完成，但是控制檯報錯，提示父級傳遞過來的值子級不可以更改！

解決辦法： 子組件裏面定義一個數據number，也就是從父組件接收到了count這個數據，把count數據複製一份，定義在了number裏面，這樣的話，就可以更改自己的number數據

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

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