父组件

主要就是 导入子组件，template中通过“：”给值，通过@给方法

<template><!-- 给子类的时候没有“，”全都是“：” @PageSizeChange=将方法传递给子类组件，--><!-- 父类的方法是onPageSizeChange，子类接收的是@PageSizeChange --><TableList:data="data":pagination="pagination":total="total"@PageSizeChange="onPageSizeChange"@CurrentChange="onCurrentChange"></TableList>
</template>
<!-- 分开之后，页面在TableList中，业务逻辑在这里，通过template中的标签传递数据-->
<!-- 说白了就是把templete 里的静态页面摘除取，然后通过这里传递数据给页面-->
<script setup lang="jsx"><!--导入子组件-->
import TableList from './components/TableList.vue'const total = ref(0)
// data中存取数据
const data = ref([])// 前后的一定要对应上啊
const pagination = ref({pageNum: 1,pageSize: 5
})onMounted(() => {query()
})
function onPageSizeChange() {query()
}
function onCurrentChange() {query()
}
async function query() {
}</script>

子组件

const props = defineProps({}）

const emit = defineEmits([‘'])

<script setup lang="jsx">
import { ref } from 'vue'
// 通过这个来接收父类的数据
const props = defineProps({data: {// 设置类型data是数组type: Array,// 设置默认值default: () => {return []}},// pagination是对象pagination: {type: Object,default: () => {// 设置对象的属性值return {pageNum: 1,pageSize: 10}}},total: {type: Number,default: () => {return 0}}
})
// 声明父组件传递过来的方法
const emit = defineEmits(['PageSizeChange', 'CurrentChange'])
// 调用该方法的时候，会调用父类组件方法
function onPageSizeChange() {emit('PageSizeChange')
}
function onCurrentChange() {emit('CurrentChange')
}
</script>