vue中.sync修饰符与vue插槽

sync修饰符

vue组件之间数据传递，组件之间的通信方式：
单向绑定
父组件通过 props 传入数据到子组件内部，但是子组件内部不要修改外部传入的 props，
vue提供了一种事件机制通知父级更新，父级中使用子组件时，监听对应的事件绑定处理函数即可

虽然不推荐在组件内部修改 props ，但有时需要组件内部状态变化时去改变 props ，
我们可以通过子组件触发事件，父级监听事件来达到这个目的，不过过程会比较繁琐。

vue提供了一些操作来简化这个过程：

v-model
v-model 是 vue 提供的一个用于实现数据双向绑定的指令，
用来简化 props 到 data，data 到 props 的操作流程

不推荐使用v-model来传参，原因：

• (1) 它隐藏了很多具体实现细节，会让我们在使用的时候，操作空间变小
• (2) 出现错误的时候，不容易排查
• (3) 同时只能处理一个prop，绑定不了多个prop

.sync修饰符
我们还可以通过另外一种方式来达到这个目的，那就是
vue2.3.0后，它被扩展为一个自动更新父组件属性的 v-on 监听器。
sync的功能：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。
可以绑定多个属性。实现数据的双向绑定。

.pagination a{
   
    width: 50px;
    margin-left: 5px;
    display: inline-block;
    text-align: center;
    font-size: 14px;
    text-decoration: none;
    border: 1px solid lightgreen;
}
.pagination a.ago{
   
    width: 26px;
 }
.pagination a.active{
   
    background-color: lightskyblue;
    color: white;
}

<div id="app">
   <ul id="ulist">
      <li v-for="user of showUsers" :key="user.id">
          userusername}}
      </li>
   </ul>
   <!-- 单向数据绑定 -->
   <!-- <partpage :pages="totalpage" :page="curpage" @changepage="changepage"></partpage> -->    
   
   <!-- v-model双向数据绑定 -->
   <!-- <partpage :pages="totalpage" v-model="curpage"></partpage> -->
      
   <!-- 指令绑定加修饰符， 更新绑定的数据（可以实现双向数据绑定）-->
   <!-- 更新的是page，那么这里page后面要加.sync修饰符 ,
        如果pages也需要双向数据绑定，也加上.sync修饰符即可-->
    <partpage :pages="totalpage" :page.sync="curpage"></partpage>
    
    <!-- 测试.sync修饰符 -->
    <!-- <new-com :pagecode.async="curpage"></new-com> -->
</div>

    <script src="js/vue.js"></script>
    <script>
        Vue.component(