teleport+自定义事件emit报错
来源:10-5 Modal组件编码
津白
2020-11-27
Modal组件打印了以下错误
我发现如果不用teleport就没有问题。或者在原有的emits数组中([‘modal-on-close’, ‘modal-on-confirm’])加上错误信息中所说的’modalOnClose’, 'modalOnConfirm’两个事件也没有问题。我在父组件中和Modal中仍然全部用的是kebab。请问这是什么原理啊。
Modal组件的代码
<template>
<teleport to="#modal">
<div class="modal d-block" tabindex="-1" v-if="visible">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{title}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" @click.prevent="onClose">
<span aria-hidden="true" >×</span>
</button>
</div>
<div class="modal-body">
<slot></slot>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" @click="onClose">取消</button>
<button type="button" class="btn btn-primary" @click="onConfirm">确定</button>
</div>
</div>
</div>
</div>
</teleport>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import useDOMCreate from '../hooks/useDOMCreate'
export default defineComponent({
props: {
visible: {
type: Boolean,
required: true,
default: false
},
title: {
type: String
}
},
// 报错
emits: ['modal-on-close', 'modal-on-confirm'],
// ok
// emits: ['modal-on-close', 'modal-on-confirm', 'modalOnClose', 'modalOnConfirm'],
setup (props, context) {
useDOMCreate('modal')
const onClose = () => {
context.emit('modal-on-close')
}
const onConfirm = () => {
context.emit('modal-on-confirm')
}
return {
onClose,
onConfirm
}
}
})
</script>
PostDetail的template中对Modal的引用
<modal title="删除文章" :visible="modalIsVisible"
@modal-on-close="modalIsVisible = false"
@modal-on-confirm="hideAndDelete"
>
<p>确定要删除这篇文章吗?</p>
</modal>
其实都是照抄课上的代码,而且在别的类似组件中(message)也没有类似的报错
写回答
1回答
-
张轩
2020-11-28
同学你好 抱歉没有特别了解你的意思。请提供一下你的代码让我看看好吗?你的意思是在Modal 和 父组件中都使用的 kebab 格式,但是还是爆出了这个错误是吗?但是我在本地并没有复现这个 warning。
042022-08-11
相似问题