前言
在前端开发中使用Vue的开发者都知道,Vue现在已经以3.0为基础版本了,也就是说Vue3.0已经成为主流版本了。还在只用Vue2.0开发没有使用3.0的开发者要注意了,要赶紧熟悉和了解Vue3.0的相关语法和知识点了。本篇博文就来分享一下关于在使用Vue3.0的时候遇到的一个提示警告,这是一个比较常见的问题,分享出来方便以后查阅使用。
报错提示
具体的报错提示如下所示:
vconsole.min.js:10 [Vue warn]: Extraneous non-emits event listeners (trustBuyClick) 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.
at <TrustDetailItem detailData= (2) [{…}, {…}] onTrustBuyClick=fn<bound trustBuyClick> >
at <TrustDetail onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > key=0 >
at <RouterView>
at <App>
分析
遇到这个问题,一般是在父子组件结合使用的时候的警告,也就是说开发者在使用子组件给父组件传值的时候遇到的警告提示。原因就是Vue3.0的时候子组件在使用emit给父组件的时候,子组件中没有定义抛出emit的事件名字。
解决方法
在子组件的export default的emits中中定义使用的emit的事件名,具体的写法如下所示:
export default defineComponent({
name: "SecyItem",
emits: ["goDetail"], //在 emits中定义使用的emit的事件名
data() {
return {};
},
mounted() {},
methods: {
goDetail1(val: any) {
this.$emit("goDetail",val) ; //emit事件
},
},
根据上述的解决方法,就可以完美解决… declare it using the "emits" option.的警告提示。
最后
通过上述的解决方法就可以完美解决本文的警告提示,虽然解决步骤很简单,但是还是需要了解掌握的,尤其是对于Vue3.0还不太熟的开发者来说更为重要。以上就是本章的全部内容,欢迎关注三掌柜的微信公众号“程序猿by三掌柜”,三掌柜的新浪微博“三掌柜666”,欢迎关注!