[Vue3] Parent component and child component methods call each other

1. The child page calls the method of the parent page

I have some problems when I write list pagination. My paging is encapsulated in a component together with the list, and then the parent page is called directly. At the same time, all my variables are defined in the parent page, which leads to The value I pass to the subpage is fixed. If you want to realize the page turning function, you need to call the method of the parent page in the subpage containing paging to change the value of the current page number of the parent page and update the current display list.

1. The page written in the component writes a page-turning click event

 2. Use emit in the child component to trigger an event to the parent component, and the parent component listens to this event

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

3. Write the monitored event in the parent component to realize the replacement of the current page and the page initialization refresh interface

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

4. Supplementary description, after the current page is replaced, the child component passes the value when the parent references the component again to get the current page and the content of the current list.

<!-- 数据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>