Vue面试题之：Vue中.sync修饰符有什么用
作者：Paula Hu
点赞是对原创者最大的肯定，我希望在这里看到你努力的身影~~~😘😘😘
写在前面
我们在面试的过程中，面试官问的很多问题其实自己都会，但是真到用自己的话来表达的时候，却发现不知该如何表达。下面一起来总结一下，如何回答 “Vue中.sync修饰符有什么用” 这个问题。
正文
第一步：先用一句话解释
.sync修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。
第二步：具体解释
一般情况下，想要实现父子组件间值的传递，通常使用的是 props 和自定义事件 $emit 。
其中，父组件通过 props 将值传给子组件，子组件再通过 $emit 将值传给父组件，父组件通过事件j监听获取子组件传过来的值。
如果想要简化这里的代码，可以使用.sync修饰符，实际上就是一个语法糖。
第三步：举一个例子来说明
- Father.vue
<template>
<div class="app">
{{dataApp}}
<hr>
<Child :money.sync="dataApp"/>
// <Child :money="dataApp" v-on:update:money="dataApp = $event"/> //两句作用等同
</div>
</template>
<script>
import Child from "./Child.vue";
export default {
data() {
return { dataApp: 10000 };
},
components: { Child }
};
</script>
- Child.vue
<template>
<div class="child">
{{money}}
<button @click="$emit('update:money', money-100)">
</button>
</div>
</template>
<script>
export default {
props: ["money"]
};
</script>
上面例子中，父组件传了一个参数 money 给子组件，子组件通过$emit修改 money 后，将值同步到父组件。
这里 <Child :money="dataApp" v-on:update:money="dataApp = $event"/> 就相当于 <Child :money.sync="dataApp"/> 。
小结
以上是我的一些学习思路和总结，深入学习可以参考Vue文档里的相关介绍，欢迎大家和我多多交流，如有错误烦请指正~~~😄😄😄
最后，你们的点赞是我继续分享的最大动力哦~~~❤️❤️❤️
