vue3 v-model取代vue2 .sync(个人使用记录)

例子：封装el-pagination组件

<script lang="ts" setup>

import {computed} from "vue";

const emit = defineEmits<{
 ( e:'update:pageSize',pageSize:number):void //pageSize要和父组件v-model:pageSize同一个名字
 ( e:'update:pageNum',pageNum:number):void
 ( e:'paginationSize'):void
 ( e:'pagination'):void
}>()

let pageParams = defineProps<{
  pageSize:number,
  pageNum:number,
  total:number
}>()
const limit = computed({
  get(){
   return pageParams.pageSize
  },
  set(val){
    emit('update:pageSize',val)
  }
})
const pageNo = computed({
  get(){
    return pageParams.pageNum
  },
  set(val){
    emit('update:pageNum',val)
  }
})
</script>

父组件   v-model:pageSize 要和子组件update：后面的名字一样，否则不生效

<Pagination :total="total" v-if="total" @pagination="getList" @paginationSize="getList" v-model:pageSize="queryParams.pageSize" v-model:pageNum="queryParams.pageNum"></Pagination>
<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick,  } from "vue";
import { getArea } from '@/api/common'
import { getSchoolList,changeSchoolStatus } from '@/api/school'
interface tableData {
  sectionType: string
}

let total = ref(0)
const queryParams: any = reactive({
  areaId: '',
  schoolName: '',
  pageNum: 1,
  pageSize: 10
})
let tableData = ref()

const getList = async () => {
  const response = await getSchoolList(queryParams)
  tableData.value = response.data.rows
  total = response.data.total
}
const queryList = () => {
  queryParams.pageNum = 1
  getList()
}

onMounted(() => {
  getList()
})
</script>