本篇博客是作为个人自学记录,如有不足之处,请批评指正。
官方文档:.sync 修饰符
sync 的功能是什么
sync 是一个语法糖;当一个子组件给变了一个 prop 的值时,这个变化也会同步到父组件中所绑定。
详细解释
使用场景
- 在子组件需要通过修改父组件传递过来的 prop 去改变父组件的状态的时候 使用 sync
功能
- 它其实就是对父子组件之间的 prop 值做了一个双向绑定
现实生活举例
我要向银行贷款,正常来讲,这个时候钱都是在银行里,我需要向银行申请贷款,然后才能从银行取出我的钱来使用;
如果说我还没申请,直接跑去银行钱库里取钱,不就相当于抢劫了吗?
同理:组件传值的过程等同于是银行告诉我有这么多钱可以贷款拿去用,不是让我直接去金库里取钱,我要贷多少,告诉银行,然后剩下多少金额告诉银行就ok了
代码示例
child.vue(子组件)
<template>
<div class="child">
{{money}}
<!-- 我要用100 -->
<button @click="$emit('update:money', money-100)">
<span>花钱</span>
</button>
</div>
</template>
<script>
export default {
props: ["money"]
};
</script>
parent.vue(父组件)
<template>
<div class="app">
App.vue 我现在有 {{total}}
<hr>
<!-- 语法糖式写法 -->
<!-- <Child :money.sync="total"/> -->
<Child :money="total" v-on:update:money="total = $event"/>
</div>
</template>
<script>
import Child from "./Child.vue";
export default {
data() {
return { total: 10000 };
},
components: { Child: Child }
};
</script>
总结
总而言之:.sync 就是事件绑定的语法糖