Vue3中子组件向父组件传值的方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue3中子组件向父组件传值的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

父组件可以通过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文章来源地址https://www.toymoban.com/news/detail-562419.html


//获取表格每一页的大小, 全局的
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)
}

到了这里，关于Vue3中子组件向父组件传值的方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！