【Vue3】父组件与子组件方法相互调用

一. 子页面调用父级页面方法

我在写列表分页的时候出现了一些问题，我的分页是连同列表一起封装在一个组件中的，然后父级页面直接调用，同时我的所有变量都是定义在父级页面中，这就导致我传给子页面的值是固定的，如果想实现翻页功能，就要在包含分页的子页面里调用父页面的方法来改变父页面的当前页数的值，以及更新当前的显示列表。

1. 组件内写的分页写一个翻页的点击事件

 2. 在子组件里用emit向父组件触发一个事件，父组件监听这个事件

/* 分页点击事件 */
const emit = defineEmits(["getPage"])
const changePage = (val) => {
  console.log(val)
  emit('getPage',val)
};

3. 父组件中写被监听的事件，实现更换当前页以及页面初始化刷新界面

/* 翻页 */
const getPage = (val) => {
    console.log(val)
    console.log(page.currentPage)
    page.currentPage = val
    initFile()
}

4. 补充说明，更换当前页以后子组件重新通过父级引用组件时进行传值来获取当前页，以及当前列表的内容。

<!-- 数据Table -->
<FileTable
        :table-data="data.fileList"
        @deleteMoreFile="deleteMoreFile"
        @toFile="goToFile"
        @handleMsg="goToFile"
        @deleteFile="deleteFile"
        @getThaw="getThaw"
        class="fileTable"
        @updateCapacity="updateCapacityDialog = true"
        @showUpdateAcl="innerVisible = true"
        @addLabel="showLabelVue = true"
        :state="page"
        @getPage="getPage"
    ></FileTable>