vue3语法糖＜script setup＞，父子组件通信使用defineEmit,defineProps,defineExpose

最新推荐文章于 2025-06-04 15:59:55 发布

saturday-yh

最新推荐文章于 2025-06-04 15:59:55 发布

阅读量2.2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue3 文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/qq_42092177/article/details/124122242

vue3 专栏收录该内容

10 篇文章

订阅专栏

该博客介绍了如何在Vue3中利用<script setup>语法糖来封装Element Plus的Pagination分页组件。子组件通过defineProps接收父组件传递的总条数、当前页和每页大小，并通过defineEmits向父组件发送'pageSizeChange'和'pageChange'事件。同时，子组件使用defineExpose暴露出关键方法。在父组件中，监听这些事件并更新状态。博客展示了具体的代码实现，帮助读者理解Vue3组件间的通信和封装技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意：这些语法糖是建立在<script setup>上的

以封装element-plus Pagination 分页组件

子组件获取到父组件的值用defineEmit,

子组件给父组件传值用defineProps

子组件暴露自己的数据和方法用defineExpose

直接上完整代码

子组件：

<template>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 50, 100]"
    :page-size="pageSize"
    layout="sizes, prev, pager, next, jumper"
    :total="props.total"
  ></el-pagination>
</template>

<script setup lang="ts">
const num = 1;
interface Props {
  total: number;
  currentPage: number;
  pageSize: number;
}
const props = withDefaults(defineProps<Props>(), {
  total: 0,
  currentPage: 1,
  pageSize: 10,
});

const emit = defineEmits<{
  (e: "pageSizeChange", val: number): void;
  (e: "pageChange", val: number): void;
}>();

// 没有ts类型声名
// const props =  defineProps({
//   total: {
//     type: Number,
//     default: 0,
//   },
//   currentPage: {
//     type: Number,
//     default: 1,
//   },
//   pageSize: {
//     type: Number,
//     default: 10,
//   },
// });

// const emit = defineEmits(["pageSizeChange", "pageChange"]);

const handleSizeChange = (val: any) => {
  emit("pageSizeChange", val);
};
const handleCurrentChange = (val: any) => {
  emit("pageChange", val);
};

// 暴露数据和方法给父组件
defineExpose({
  num,
  handleSizeChange,
});
</script>
<style scoped>
</style>

父组件：

<template>
  <page
      ref="pagechild"
      :total="state.pageInfo.total"
      :currentPage="state.pageInfo.currentPage"
      :pageSize="state.pageInfo.pageSize"
      @pageChange="pageChange"
      @pageSizeChange="pageSizeChange"
    ></page>
</template>

<script setup  lang="ts" name="simpleTemp">
import {
  reactive,
  ref,
  toRefs,
  onBeforeMount,
  onActivated,
} from "vue";
const state = reactive({
  pageInfo: {
    currentPage: 1,
    total: 0,
    pageSize: 10,
  },
})
const pageSizeChange = (val: number) => {
  state.pageInfo.pageSize = val;
  state.pageInfo.currentPage = 1;
  getTableList();
};
const pageChange = (val: number) => {
  state.pageInfo.currentPage = val;
  getTableList();
};
</script>
<style scoped>
</style>