理解.sync 的用法

Posted 2023-05-02

参考技术A

Vue 中规定：

案例

Child 组件中不能直接修改从 props 接收外部数据 data，先把 data 存在 Child 组件数据 n 中，当 Child 组件需要修改 data 时，必须利用 $emit 触发父组件自身 update:data 方法修改 data ， $emit 在触发事件时将更新的 n 作为参数传回，在父组件中利用 $event 接收该参数更新到 data，从而同时完成子组件父组件 data 的更新
Child.vue

Vue 为了方便起见，将 <Child :data="data" @update:data="data = $event" /> 提供一个缩写，即 .sync 修饰符, <Child :data.sync="data" />

注意 带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 :data.sync=”data++” 会报错，只能传变量名称不能传表达式，v-model 也是)。

vue3关于.sync的用法

场景描述 我们都知道，子组件是不能够去修改父组件传递过来的数据。 因为如果子组件去修改父组件件传递过来的数据。 会导致数据的应用流向变得难以理解。 但是有些时候，我们需要当子组件的数据变化后，父组件的数据也跟着变化。 vue2中我们可以使用.sync来解决这个办法。 那么vue3应该怎么去处理这个问

遇见问题，这是你成长的机会，如果你能够解决，这就是收获。

作者：明月人倚楼
出处：https://www.cnblogs.com/IwishIcould/

想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ•̀ω•́)っ✎⁾⁾！

如果觉得这篇文章对你有小小的帮助的话，记得在右下角点个“推荐”哦，或者关注博主，在此感谢！

万水千山总是情，打赏5毛买辣条行不行，所以如果你心情还比较高兴，也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾！

想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ•̀ω•́)っ✎⁾⁾！

支付宝

微信

本文版权归作者所有，欢迎转载，未经作者同意须保留此段声明，在文章页面明显位置给出原文连接
如果文中有什么错误，欢迎指出。以免更多的人被误导。