理解 vue .sync修饰符
Vue的规定
在Vue的父子组件触发事件通信的过程中，有以下几条规则
.sync 的用法规则
- 组件不能修改
props外部数据 this.$emit可以触发事件，并传参$event可以获取$emit的参数
Vue的组件在接受外部数据props时，Vue规定，子组件在通过props接受外部数据后只有使用该数据的权利，但没有修改该属性的权利。因此Vue规定组件只能有权使用props的属性，想要改变，就必须通知该数据的真正拥有者，也就是使用该组件的父文件
.sync 修饰符的作用
简化了父子组件之间数据通信的代码书写方式，对 prop 进新双向绑定。
2.一个场景
2.1场景描述
- 父组件有10000元
- 子组件引用父组件的10000元
- 子组件每次点击按钮会花掉10元
- 子组件和父组件显示的余额发生相同的变化
2.2不使用.sync修饰符的写法
// 父组件 <template> <div class="app"> App.vue 我现在有 {{total}} <hr> <!-- 这里的 update:money 是一个字符串 --> <!-- 通过 v-on: 绑定 update:money 事件 --> <!-- 使用 $evet 接收子组件传递的参数 --> <Child :money="total" v-on:update:money="total = $event"/> </div> </template> <script> import Child from "./Child.vue"; export default { data() { return { total: 1000 }; }, components: { Child: Child } }; </script> <style> .app { border: 3px solid red; padding: 10px; } </style>
// 子组件 <template> <div class="child"> {{money}} <!-- 通过 $emit 触发父组件上的 update:money 事件 --> <!-- ，第一个参数为事件名称，第二个参数为参数的返回结果 --> <button @click="$emit('update:money', money-10)"> <span>花钱</span> </button> </div> </template> <script> export default { // 接受父组件传来的 money 属性 // 子组件是不能直接修改的，需要通过 $emit 触发的方式去更改该属性 props: ["money"] }; </script> <style> .child { border: 3px solid green; } </style>
点击3次，结果如图
网络异常，图片无法展示
|
2.3使用.sync修饰符的写法
// 父组件如下，子组件不变 <template> <div class="app"> App.vue 我现在有 {{total}} <hr> <!-- 简化了代码书写方式 --> <Child :money.sync="total"/> </div> </template> <script> import Child from "./Child.vue"; export default { data() { return { total: 1000 }; }, components: { Child: Child } }; </script> <style> .app { border: 3px solid red; padding: 10px; } </style> 复制代码
3..sync的作用
- 上述场景中，如果不使用
.sync修饰符，那么父组件就要写<Child :money="total" v-on:update:money="total = $event"/>； - 用了
.sync修饰符，那么父组件只要写<Child :money.sync="total"/>，简化了代码 - 而像子组件要修改
props的属性，但子组件又不能直接修改，必须在修改之后通知父组件修改了props属性的场景很常见. - 所以
.sync修饰符的存在很有必要vue文档-.sync
