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>