我的代码是照着你的敲的，我这里报了一个这样的警告

[Vue warn]: Extraneous non-emits event listeners (modalOnClose, modalOnConfirm) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option.

这个问题我查了一下一般是在子组件里面派发事件时没有使用 emits 定义才会发出警告，但是我这里已经定义了，弹窗点击确认也能删除文章，只是一直在报警告

我在这个问答看到了下面一句话，就是如果改成驼峰 eslint 就会报错，如果使用 - 的方式和小写就会报上面的错误，请问老师有没有这个问题

另一点让我觉得好奇的是，upload 组件同样也使用了这样的事件命名方式不会报错

modal 组件：

<script lang="ts">
import { defineComponent } from 'vue'
import useDOMCreate from '../hooks/uesDomCreate'
export default defineComponent({
  name: 'modal',
  props: {
    title: String,
    visible: {
      type: Boolean,
      default: false
    }
  },
  emits: ['modal-on-close', 'modal-on-confirm'],
  setup(_props, context) {
    useDOMCreate('modal')
    const onClose = () => {
      context.emit('modal-on-close')
    }
    const onConfirm = () => {
      context.emit('modal-on-confirm')
    }
    return {
      onClose,
      onConfirm
    }
  }
})
</script>

PostDetail：

一加上这两个自定义事件就会发出警告

<modal
  title="删除文章"
  :visible="modalIsVisible"
  @modal-on-close="modalIsVisible = false"
  @modal-on-confirm="hideAndDelete"
>
  <p>确定要删除这篇文章吗？</p>
</modal>