元件的單向資料流

單向資料流

父元件的 data 值更新後通過 props 選項交給子元件進行渲染，反之則不行；
這就是單向資料流(單向下行繫結)，不能通過子元件來改變父元件的狀態；
這樣做的是為了防止父元件發生改變後，資料流變得難以理解；
父元件更新時，子元件所有 props 值也會更新，你不能改變子元件的 props 值。

<div id="app">
    <html-a v-bind:count="count"></html-a>
</div>

    //父元件
    const app = new Vue({
        el : '#app',
        data : {
            count : 5
        },
        components : {
            'html-a' : {
                data() {
                    return {
                        message : '子元件'
                    }
                },
                template : `
                      <button v-on:click="count++">{{count}}</button>
                `,
                props : ['count']
            }
        },
    });

 

問題

以上內容，會正確改變了 props 的值，也渲染到檢視中，但控制檯報錯；
意為：不可以直接修改 props 值，可以通過資料或計算屬性來解決

<div id="app">
    <html-a v-bind:count="count"></html-a>
</div>

    //資料，類似於建立一個子元件的區域性變數
    const app = new Vue({
        el : '#app',
        data : {
            count : 5
        },
        components : {
            'html-a' : {
                data() {
                    return {
                        message : '子元件',
                        childCount : this.count
                    }
                },
                template : `
                      <button v-on:click="childCount++">{{childCount}}</button>
                `,
                props : ['count']
            }
        },
    });
  
    //計算屬性與方法
    const app = new Vue({
        el : '#app',
        data : {
            count : 5
        },
        components : {
            'html-a' : {
                data() {
                    return {
                        message : '子元件',
                        childCount : this.count
                    }
                },
                template : `
                      <button v-on:click="clickChildCount">{{changedChildCount}}</button>
                `,
                props : ['count'],
                computed: {
                    changedChildCount() {
                        return this.childCount;
                    }
                },
                methods: {
                    clickChildCount() {
                        this.childCount++
                    }
                }
            }
        },
    });