「这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战」
1.问题背景
vue中，父子组件通信最常用的方式就是props和 $emit，但是父组件传递给子组件的数据，但是不能进行修改props里的属性的值
2.vue中的.sync修饰符用法及原理详解，解决组件之间传值动态修改问题
父组件通过props传值给子组件，如何避免子组件改变props的属性值报错问题
- vue中我们经常会用v-bind(缩写为:)给子组件传入参数。或者我们会给子组件传入一个函数，子组件通过调用传入的函数来改变父组件的状态。
//父组件给子组件传入一个函数
<MyFooter :age="age" @setAge="(res)=> age = res"></MyFooter>
//子组件通过调用这个函数来实现修改父组件的状态。
mounted () {
console.log(this.$emit('setAge',1234567));
}
- 这时子组件触发了父组件的修改函数使父组件的age修改成了1234567这种情况比较常见切写法比较复杂。于是我们引出今天的主角 .sync
//父组件将age传给子组件并使用.sync修饰符。
<MyFooter :age.sync="age"></MyFooter>
//子组件触发事件
mounted () {
console.log(this.$emit('update:age',1234567));
}
这里注意我们的事件名称被换成了update:age update：是被固定的也就是vue为我们约定好的名称部分 age是我们要修改的状态的名称，是我们手动配置的，与传入的状态名字对应起来
这样就完成了，是不是感觉简单了很多。
注意事项：这里我们必须在事件执行名称前加上update：的前缀才能正确触发事件
3.总结：
父子组件传值时，父组件传递的参数，数组和对象，子组件接受之后可以直接进行修改，并且会传递给父组件相应的值也会修改。
如果传递的值是字符串，直接修改会报错。
不推荐子组件直接修改父组件中的参数，避免这个参数多个子组件引用，无法找到造成数据不正常的原因
