.sync修饰符 我不是女神ヾ 2022-11-22 05:10 116阅读 0赞 ### **第一步:先用一句话解释** ### .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文档][Vue]**里的相关介绍,欢迎大家和我多多交流,如有错误烦请指正~~~ [Vue]: https://link.zhihu.com/?target=https%3A//cn.vuejs.org/v2/guide/components-custom-events.html%23sync-%25E4%25BF%25AE%25E9%25A5%25B0%25E7%25AC%25A6
还没有评论,来说两句吧...