子组件不能直接对父组件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>