vue数据同步（sync修饰符）

一、描述

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

二、使用sync修饰符

例子：

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

<Son
    ref="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更新一下的事情？

1. sync 修饰符: 使用 .sync 可以让数据在父子组件之间双向绑定，便于在子组件中修改后，父组件可以实时接收到变化。

2. 事件发射: 当 select 被调用并且 this.$emit('update:selectionItems', items) 被执行时，父组件会自动接收到这个事件并更新 selectionItems 的值。

3. 响应式系统: Vue.js 的响应式系统使得数据的变化能够被自动追踪和更新。当 selectionItems 在父组件中发生变化时，所有使用该属性的地方都会重新渲染。

就这样就实现了共享状态，而不用绑定自定义事件。