子组件不能直接对父组件prop进行重新赋值，但是注意了父组件是引用类型的时候，子组件可以修改父组件的props里的属性。

好了进入主题：
当我们使用prop的时候，不想数据是单向流的，想子组件改变的时候父组件也改变，那么我们有两种方法来解决这个问题：

1. 比较复杂

子组件

<template>
    <div>
        <input @input="onInput" :value="value"/>
    </div>
</template>

<script>
export default {
    props: {
        value: {
            type: String
        }
    },
    methods: {
        onInput(e) {
            this.$emit("valueChanged", e.target.value)
        }
    }
}
</script>

父组件

<template>
    <info :value="myValue" @valueChanged="e => myValue = e"></info>
</template>

<script>
    inport info from './info.vue';
    export default {
        components: {
            info,
        },
        data() {
            return {
                myValue: 1234,
            }
        },
    }
</script>

2. .sync (写法简便)

方法一：
父组件

<info :val.sync="myValue"></info>

子组件

methods: {
    onInput(e) {
        this.$emit("update:val", e.target.value)
    }
}

• 这里=我们的事件名称被换成了update:val
• update：是被固定的也就是vue为我们约定好的名称部分
• val是我们要修改的状态的名称，是我们手动配置的，与传入的状态名字对应起来

方法二：
如果一个组件的多个prop都要实现双向绑定，根据上面学到的知识，只需要每个prop加sync修饰符

<info :a.sync="value1" :b.sync="value2" :c.sync="value2" :d.sync="value2"></info>

这样写太麻烦，vue提供了一种更简便的方法， v-bind.sync = “对象”

<info v-bind.sync="obj"></info>
..
<script>
..
data() {
    obj: {a: '', b: '', c: '', d: ''}
}
...
</script>