VUE3子组件调用父组件方法

要在子组件中执行删除操作并更新dirList，你可以通过向子组件传递一个方法，当子组件需要删除项目时，调用该方法。以下是一种可能的实现方法：

首先，在父组件中定义一个方法来处理删除操作，然后将该方法传递给子组件。当子组件需要删除项目时，它将调用此方法并传递要删除的项目的标识符。父组件接收到标识符后，可以更新dirList并触发重新渲染。

<template>
  <el-row v-for="(row, index) in Math.ceil(dirList.length / 2)" :key="index">
    <el-col v-for="(item, colIndex) in 2" :key="colIndex" :span="12">
      <div v-if="(index * 2 + colIndex) < dirList.length">
        <Dir :name="dirList[index * 2 + colIndex].name" :id="dirList[index * 2 + colIndex].id" :dirList="dirList" @delete="deleteItem"/>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import Dir from "@/components/dir.vue";

export default {
  name: "folder",
  components: { Dir },
  data() {
    return {
      dirList: [
        { name: "文件夹1", id: "1" },
        { name: "文件夹2", id: "2" },
        { name: "文件夹3", id: "3" },
        { name: "文件夹4", id: "4" },
        { name: "文件夹5", id: "5" }
      ]
    };
  },
  methods: {
    deleteItem(id) {
      // 根据 id 删除项目
      this.dirList = this.dirList.filter(item => item.id !== id);
    }
  }
};
</script>

<style scoped>
</style>

然后，在子组件中，触发删除操作时调用父组件传递的删除方法：

<template>
  <!-- 子组件的模板 -->
</template>

<script>
export default {
  props: ['name', 'id', 'dirList'],
  methods: {
    deleteItem() {
      // 调用父组件传递的删除方法，并传递要删除的项目的 id
      this.$emit('delete', this.id);
    }
  }
};
</script>

<style scoped>
</style>

这样，当子组件中的删除按钮被点击时，父组件中的deleteItem方法将被调用，项目将从dirList中删除，并且UI将自动更新以反映更改。