vue数据同步（sync修饰符）

本文主要是介绍vue数据同步（sync修饰符），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、描述

本文描述的数据同步，是基于父子组件进行传递的参数实现。实现的内容是：子组件里面选择框，选择的对象可以传递给父组件，但一般涉及到子传父，可能会考虑使用$emit然后通过在父组件身上绑定一个自定义方法，通过子组件去emit触发这个事件，传递参数,但是这里不使用这种，新学了一种，数据同步的方式，也就是在子组件选择的数据，可以同步在父组件中。

二、使用sync修饰符

例子：

比如在父组件有一个子组件：

<Sonref="son":selection-items.sync="selectionItems"@search="search"
>

子组件：

子组件中从选择框选择之后拿到数据触发的事件：

select(items) {console.log({ items })this.selections = items this.$emit('update:selectionItems', items)   //更新数据同步
},

this.$emit('update:selectionItems', items): 发出一个事件通知父组件更新 selectionItems。

:selection-items.sync="selectionItems"
这里使用了 .sync 修饰符，这意味着任何从子组件发出的更新都会自动更新父组件中的 selectionItems 值。

随便在父组件其他地方绑定一个事件，看看有没有获取到从子组件里面获取到的值，因为要拿选择的值过来父组件这边使用。

<span class="handle-btn" @click="delMore">批量删除</span>delMore() {console.log("more",this.selectionItems) //有数据},

三、为什么能够同步，只是一个修饰符，加子组件emit，undate更新一下的事情？

sync 修饰符: 使用 .sync 可以让数据在父子组件之间双向绑定，便于在子组件中修改后，父组件可以实时接收到变化。
事件发射: 当 select 被调用并且 this.$emit('update:selectionItems', items) 被执行时，父组件会自动接收到这个事件并更新 selectionItems 的值。
响应式系统: Vue.js 的响应式系统使得数据的变化能够被自动追踪和更新。当 selectionItems 在父组件中发生变化时，所有使用该属性的地方都会重新渲染。