1. 父组件
v-model:current-page-num 是多属性时使用,单个值可以使用v-model="",相应的子组件的props指定为modelValue,emit中的事件为update:modelValue
<template>
<CommonInfo v-model:current-page-num="currentPage"></CommonInfo>
</template>
<script setup lang="ts">
const currentPage = ref(0)
<script>
2. 子组件
<template>
<div class="pagination-wrapper">
<el-pagination v-model:current-page="currentPage" :total="total" hide-on-single-page layout="prev, pager, next"></el-pagination>
</div>
</template>
<script lang="ts" setup>
const props = defineProps({
// 页码
currentPageNum: {
type: Number,
default: 1,
},
})
const emit = defineEmits(["update:currentPageNum"])
const currentPage = computed({
get: () => {
return props.currentPageNum
},
set: (v: number) => {
emit("update:currentPageNum", v)
},
})
</script>
评论列表
已有0条评论