vue3中emits选项

今天在使用vue3中将一个组件渲染为了代码片段且定义了一个自定义事件,报了一个警告

[Vue warn]: Extraneous non-emits event listeners (change) 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选项中进行声明


两种解决方案:

1.把代码片段放到根元素中

2.在emits选项中声明自定义事件

emits: ['eventName'],

结论
1.在拥有跟元素的组件中,触发自定义事件,有没有emits选项不影响
2.如果组件渲染为代码片段,vue3.0需要在emits中声明所触发的自定义事件
3.提倡:触发自定义事件都应在emits选项中声明
 
注意最后一点:无论是否在根元素中触发自定义事件,只要有自定义事件都应在emits选项中声明,这样可以方便后期维护以及在其他地方使用自定义事件时一眼就能看出该组件创建了哪些自定义事件

 

posted @ 2021-12-06 20:40  mmsmd  阅读(2516)  评论(0)    收藏  举报