Javascript Vuetify对话框组件以从父组件中正确删除项

我有一个删除对话框组件，当单击取消或删除时，不会发生任何事情，甚至不会出现错误。要正确删除或取消，我缺少什么

<template>
  <v-dialog
    v-bind="$attrs"
    v-on="$listeners"
    max-width="500px"
    persistent
  >
    <v-card>
      <v-card-title
        class="headline"
      >
        {{ title }}
      </v-card-title>
      <v-card-text>
        {{ message }}
      </v-card-text>
      <v-card-actions>
        <v-spacer />
        <v-btn
          color="grey darken-1"
          text
          @click="$emit('closeDeleteDialog')"
        >
          Cancel
        </v-btn>
        <v-btn
          color="primary darken-1"
          text
          @click="$emit('deleteItem')"
        >
          Delete
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  name: 'DeleteDialog',
  props: {
    title: {
      type: String,
      required: true
    },
    message: {
      type: String,
      default: ''
    }
  },
  emits: ['closeDeleteDialog', 'deleteItem']
}
</script>

{{title}}
{{message}}
取消
删除
导出默认值{
名称：“DeleteDialog”，
道具：{
标题：{
类型：字符串，
必填项：true
},
信息：{
类型：字符串，
默认值：“”
}
},
发出：['closeDeleteDialog'，'deleteItem']
}

以下是我使用组件的方式：

        <DeleteDialog
          v-model="dialogDelete"
          title="Delete location"
          message="Are you sure you want to delete this location?"
        />

在导入组件的同一视图中，我有我的方法

export default {
  components: {
    DeleteDialog: () => import('@/components/Shared/DeleteDialog'),
  },
  data: () => ({
    locationId: null,
    dialog: false,
    dialogDelete: false,
  })
  },
  methods: {
    deleteItem () {
      this.$store.dispatch('deleteFirebaseDoc', { docId: this.locationId, collection: 'locations' })

      this.locationId = null
      this.dialogDelete = false
    },
    deleteItemConfirm (item) {
      this.locationId = item.docId
    },
    closeDeleteDialog () {
      this.dialogDelete = false
    }
  }
}
</script>

导出默认值{
组成部分：{
DeleteDialog:（）=>导入（'@/components/Shared/DeleteDialog'），
},
数据：（）=>({
locationId:null，
对话：错，
dialogDelete:false，
})
},
方法：{
删除项（）{
this.$store.dispatch（'deleteFirebaseDoc'，{docId:this.locationId，collection:'locations'}）
this.locationId=null
this.dialogDelete=false
},
删除项目确认（项目）{
this.locationId=item.docId
},
closeDeleteDialog（）{
this.dialogDelete=false
}
}
}

---

如何正确访问我的组件以删除和删除或取消对话框？

在父组件中，您需要侦听您发出的事件

<DeleteDialog
  v-model="dialogDelete"
  title="Delete location"
  message="Are you sure you want to delete this location?"
  @close-delete-dialog="dialogDelete = false" // or call closeDeleteDialog () 
  @delete-item="deleteItem()"
/>

我从未将camelCase用于事件发送，因此我宁愿将其编写为

$emit（'close-delete-dialog'）

和

$emit（'delete-item'）