vue学习-16-组件的单向数据流

vue学习-16-组件的单向数据流

组件的单向数据流

单向数据流

父组件的 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++
                    }
                }
            }
        },
    });