通知父组件从同一个子组件中删除子项

<template>
  <div>
    <!-- 子项内容 -->
    <span>{{ item }}</span>
    <!-- 删除按钮 -->
    <button @click="deleteItem">删除</button>
  </div>
</template>

<script>
export default {
  props: ['item'],
  methods: {
    deleteItem() {
      this.$emit('delete-item');
    }
  }
}
</script>

<template>
  <div>
    <!-- 子组件列表 -->
    <child-component v-for="item in items" :key="item" :item="item" @delete-item="deleteItem"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      items: ['子项1', '子项2', '子项3']
    }
  },
  methods: {
    deleteItem() {
      // 在这里实现删除子项的逻辑
      // 例如，从数组中移除对应的元素
    }
  }
}
</script>