Vue单向数据流

props是单向绑定的，当父组件的属性变化时，将传导给子组件，但是不会反过来
而且不允许子组件直接修改父组件中的数据，报错
解决方式：
方式1：如果子组件想把它作为局部数据来使用，可以将数据存入另一个变量中再操作，不影响父组件中的数据

<div id="itany">
    <h2>父组件：{{name}}</h2>
    <input type="text" v-model="name">
    <hr>
    <my-hello :name="name"></my-hello>
</div>
<template id="hello">
    <div>
        <h3>子组件：{{username}}</h3>
        <button @click="change">修改数据</button>
    </div>
</template>
<script>
    var vm = new Vue({ //父组件
        el: '#itany',
        data: {
            name: 'tom',
        },
        components: {
            'my-hello': { //子组件
                template: '#hello',
                props: ['name'],
                data() {
                    return {
                        username: this.name //方式1：将数据存入另一个变量中再操作
                    }
                },
                methods: {
                    change() {
                        this.username = 'alice';
                    }
                }
            }
        }
    });
</script>

方式2：如果子组件想修改数据并且同步更新到父组件，两个方法：
a.使用.sync（1.0版本中支持，2.0版本中不支持，2.3版本又开始支持）
需要显式地触发一个更新事件

<div id="itany">
    <h2>父组件：{{name}}</h2>
    <input type="text" v-model="name">
    <hr>
    <my-hello :name.sync="name"></my-hello>
</div>
<template id="hello">
    <div>
        <h3>子组件：{{name}}</h3>
        <button @click="change">修改数据</button>
    </div>
</template>
<script>
    var vm = new Vue({ //父组件
        el: '#itany',
        data: {
            name: 'tom',
        },
        components: {
            'my-hello': { //子组件
                template: '#hello',
                props: ['name'],
                methods: {
                    change() {
                        this.$emit('update:name', 'alice'); //方式2：a.使用.sync，需要显式地触发一个更新事件
                    }
                }
            }
        }
    });
</script>

b.可以将父组件中的数据包装成对象，然后在子组件中修改对象的属性(因为对象是引用类型，指向同一个内存空间)，推荐

<div id="itany">
    <h2>父组件：{{name}}</h2>
    <input type="text" v-model="name">
    <h2>父组件：{{user.age}}</h2>
    <hr>
    <my-hello :name.sync="name" :user="user"></my-hello>
</div>
<template id="hello">
    <div>
        <h3>子组件：{{name}}</h3>
        <h3>子组件：{{user.age}}</h3>
        <button @click="change">修改数据</button>
    </div>
</template>
<script>
    var vm = new Vue({ //父组件
        el: '#itany',
        data: {
            name: 'tom',
            user: {
                name: 'zhangsan',
                age: 24
            }
        },
        components: {
            'my-hello': { //子组件
                template: '#hello',
                props: ['name', 'user'],
                data() {
                    return {
                        username: this.name //方式1：将数据存入另一个变量中再操作
                    }
                },
                methods: {
                    change() {
                        // this.username='alice';
                        // this.name='alice';
                        // this.$emit('update:name','alice'); //方式2：a.使用.sync，需要显式地触发一个更新事件
                        this.user.age = 18;
                    }
                }
            }
        }
    });
</script>