Vue3中子组件向父组件传值的方法
父组件可以通过props向子组件传值, 子组件可以用过 emits(‘update:prop’, propValue) 修改父组件绑定在此Prop上父组件的值。
·
父组件可以通过props向子组件传值, 子组件可以用过 emits(‘update:prop’, propValue) 修改父组件绑定在此Prop上父组件的值
本文演示了一个可以缓存分页大小(每页显示几行数据)的分页组件的使用, 它是对el-pagination做了一个简单的封装
子组件
如下是一个分页组件
核心: 在换页时通过 emits(‘update:skipCount’, skipCount) 更新Prop和绑定在此Prop上父组件的值
MkPagination.vue
<template>
<el-pagination
v-model:currentPage="data.currentPage"
v-model:page-size="props.pageSize"
v-model:total="props.totalCount"
:page-sizes="[5, 10, 15, 20, 25, 30, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
@size-change="sizeChange"
@current-change="currentChange"
class="main"
/>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import { getPageSize, setPageSize, isNull } from '@/utils'
//定义公共参数
const props = defineProps({
skipCount: {
type: Number,
default: 0,
},
pageSize: {
type: Number,
default: function () {
return getPageSize()
},
},
totalCount: {
type: Number,
default: 0,
},
})
const data = reactive({
currentPage: props.skipCount / props.pageSize + 1,
})
let _pageSize = props.pageSize
//修改了页大小
const sizeChange = (pageSize: number) => {
setPageSize(pageSize) //缓存页大小
data.currentPage = 1 // 回到第一页
_pageSize = pageSize //记录页大小
// 回到第一页 : 修改页大小时SkipCount修改为0
query(0, pageSize)
}
//修改了当前页码
const currentChange = (currentPage: number) => {
var skipCount = (currentPage - 1) * _pageSize //修改页码时,计算SkipCount
query(skipCount, _pageSize)
}
const query = (skipCount: number, pageSize: number) => {
emits('update:skipCount', skipCount) //更新Prop和绑定在此Prop上父组件的值
emits('update:pageSize', pageSize)
emits('query') //调用父组件执行查询
}
//定义回调函数
let emits = defineEmits(['update:skipCount', 'update:pageSize', 'query'])
</script>
<style scoped>
.main {
padding: 6px 10px;
background: #fff;
}
</style>
父组件
以下是一个分页获取用户信息的界面
子组件调用 emits(‘update:skipCount’, skipCount)时,PaginationObj的值会变化
UserList.vue
<template>
<MkTableQuery v-model:keyword="queryData.keyword" @query="query"> </MkTableQuery>
<MkTableSample :data="resultData.items" ref="tableRef" @add="addClick" @row-dblclick="rowDoubleClick">
<MkTableColumn prop="userName" label="用户名" />
<MkTableColumn prop="name" label="姓名" />
<MkTableColumnBool
prop="isActive"
label="是否启用"
:options="[
{ value: false, name: '停用' },
{ value: true, name: '启用' },
]"
/>
</MkTableSample>
<MkPagination v-model:skipCount="PaginationObj.skipCount" v-model:pageSize="PaginationObj.pageSize" v-model:totalCount="PaginationObj.totalCount" @query="query"></MkPagination>
</template>
<script lang="ts" setup>
import { reactive, ref, toRefs } from 'vue'
import { getUserList } from '@/api/bas/basUser'
import PaginationEntity from '@/model/PaginationEntity'
import { clog, isNull } from '@/utils'
const PaginationObj = new PaginationEntity() //分页参数
const queryData = reactive({
keyword: '',
})
const resultData = reactive({
items: [],
})
const query = () => {
getUserList(queryData.keyword, PaginationObj.skipCount, PaginationObj.pageSize).then(res => {
resultData.items = res.items
PaginationObj.totalCount = res.totalCount
})
}
</script>
PaginationEntity .vue
import { getPageSize } from '@/utils'
export default class PaginationEntity {
skipCount: Number = 0
pageSize: Number = getPageSize() //读取缓存在本地的页大小
totalCount: Number = 0
}
utils.ts
//获取表格每一页的大小, 全局的
export function getPageSize(): number {
let tmp = getlocalStorage('PageSize')
return isNull(tmp) ? 20 : parseInt(tmp)
}
//保存表格每一页的大小
export function setPageSize(val: number): number {
setlocalStorage('PageSize', val)
}
export function getlocalStorage(name) {
return localStorage.getItem(name)
}
export function setlocalStorage(name, value) {
return localStorage.setItem(name, value)
}
更多推荐
所有评论(0)