vue3 的v-model 原理

• 分页组件

  <template>
      <div class="page">
          总数： {{ total }}
          <select v-model="nowPagesize" @change="changeSize">
              <option  v-for="item in pageSizes"  :value="item"> 每页/{{item}}条  </option>
          </select>
  
          <div class="pre"   @click="changeActive(currentPage - 1)"> &lt; </div>
          <div class="page-num" v-for="item in pageNum " :key="item" :class="item == currentPage ? 'active' : ''"
              @click="changeActive(item)"> {{ item }}
          </div>
  
          <div class="next" @click="changeActive(currentPage + 1)"> &gt; </div>
          <div class="lf10">
              前往 <input class="jump-imp"   v-model.number="jumpNum">
          <span @click="jumpBtn"> 跳转</span>
          </div>
  
      </div>
  </template>
  
  <script setup>
  import { defineProps, defineEmits, toRefs, computed ,ref} from 'vue';
  
  // 如果你xxxx去定义这个子传父的事件类型 ，后面就可以 通过v-model 来简化 代码了
  const emit = defineEmits(['update:currentPage','update:pageSize'])
  
  const props = defineProps({
      total: {
          type: Number,
          default: 0
      },
      currentPage: {
          type: Number,
          default: 1
      },
      pageSize: {
          type: Number,
          default: 10
      },
      pageSizes:{
          type:Array,
          default:()=>[100,200,300,400]
      }
  })
  
  
  // 解构里面的变量并保证原有的 响应式
  const { total, currentPage, pageSize,pageSizes } = toRefs(props)
  const jumpNum = ref(1)
  const nowPagesize = ref(pageSize.value)
  
  
  //计算出应该出现的页码个数
  const pageNum = computed(() => {
      return Math.ceil(total.value / pageSize.value)
  })
  
  
  //点击页码 盒子 选中一个
  const changeActive = (page) => {
  
  
      //边界：  只要目标页 小于等于 计算出来的 最大页码值 都让他更改当前页
      if (page <= pageNum.value && page>=1) {
          console.log('当前选中 ', page);
          emit('update:currentPage', page)
      }
  }
  
  //点击跳转
  const jumpBtn = ()=>{
      changeActive(jumpNum.value)
  }
  
  //改变页码长度
  const changeSize = ()=>{
      console.log(nowPagesize.value);
      emit('update:pageSize',nowPagesize.value)
  }
  
  
  
  </script>
  
  <style lang="scss" scoped>
  .lf10{
      margin-left: 10px;
  }
  .jump-imp{
     width: 30px; 
     text-align: center;
  }
  .page {
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
  }
  
  .page-num {
      margin-left: 10px;
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      background: #88dddd; //#409eff
      color: #fff;
      cursor: pointer;
  
      &:hover {
          background: #409eff;
      }
  }
  
  /* 当前页被选中的效果 */
  .active {
      background: #409eff;
  }
  
  .pre,
  .next {
      width: 30px;
      height: 30px;
      background: #88dddd;
      color: #fff;
      font-weight: 700;
      cursor: pointer;
      margin-left: 10px;
  }
  
  .pre:hover,
  .next:hover {
      background: #f44;
  }</style>
  
  

• 父组件

  <template>
    <div>
        <PageNum 
           :current-page="pageData.currentPage"
           @update:current-page="(data)=>{pageData.currentPage =data }"
          v-model:page-size="pageData.pageSize"
          :total="pageData.total"
          :page-sizes="[10,20,30,40,111,1,5,45,5,423]"
  
          @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
        >
        <!-- <PageNum 
           v-model:current-page="pageData.currentPage"
          v-model:page-size="pageData.pageSize"
          :total="pageData.total"
          @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
        > -->
  
        </PageNum>  
    </div>
  </template>
  
  <script setup>
  import PageNum from './components/PageNum.vue'
  import { reactive } from 'vue';
  
   
   const  pageData = reactive({
       currentPage:1,
       pageSize:10,
       total:50
   })
   const handleSizeChange = (size)=>{
     console.log('长度发生改变啦！！',size);
   }
   const handleCurrentChange = (currentPage)=>{
     console.log('当前页面是：',currentPage);
   }
  
  
  </script>
  
  <style lang="scss" scoped>
  
  </style>