前端开发:Vue3.0提示警告… declare it using the "emits" option. 的解决方法

简介: 在前端开发中使用Vue的开发者都知道,Vue现在已经以3.0为基础版本了,也就是说Vue3.0已经成为主流版本了。还在只用Vue2.0开发没有使用3.0的开发者要注意了,要赶紧熟悉和了解Vue3.0的相关语法和知识点了。本篇博文就来分享一下关于在使用Vue3.0的时候遇到的一个提示警告,这是一个比较常见的问题,分享出来方便以后查阅使用。

前言

在前端开发中使用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”,欢迎关注!

相关文章
|
1月前
|
JavaScript 前端开发
vue前端下载,实现点击按钮弹出本地窗口,选择自定义保存路径
这个不用代码实现(网上也找不到方法可以调出另存为窗口),更改浏览器设置就可以,否则,现在的浏览器都是默认直接保存到下载路径中
65 3
|
2月前
|
缓存 JavaScript 前端开发
IDEA启动VUE前端项目
IDEA启动VUE前端项目操作流程
|
25天前
|
前端开发 应用服务中间件 nginx
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
101 0
|
4天前
|
缓存 安全 JavaScript
前端安全:Vue应用中防范XSS和CSRF攻击
【4月更文挑战第23天】本文探讨了在Vue应用中防范XSS和CSRF攻击的重要性。XSS攻击通过注入恶意脚本威胁用户数据,而CSRF则利用用户身份发起非授权请求。防范措施包括:对输入内容转义、使用CSP、选择安全的库;采用Anti-CSRF令牌、同源策略和POST请求对抗CSRF;并实施代码审查、更新依赖及教育团队成员。通过这些实践,可提升Vue应用的安全性,抵御潜在攻击。
|
8天前
|
NoSQL JavaScript 前端开发
报错场景:ant design vue前端登录时,输入的验证码是对的,但是一直提上验证码错误,登录不进去 报错信息(Error in execution; nested exception)
报错场景:ant design vue前端登录时,输入的验证码是对的,但是一直提上验证码错误,登录不进去 报错信息(Error in execution; nested exception)
18 0
|
16天前
|
JavaScript 前端开发 API
游戏开发入门:Python后端与Vue前端的协同工作方式
【4月更文挑战第11天】使用Python后端(Flask或Django)和Vue.js前端开发游戏变得流行,能提高开发效率和可维护性。本文指导如何构建这样的项目,包括设置环境、创建虚拟环境、搭建后端API及前端Vue组件,强调前后端协作和API接口的重要性。这种架构促进团队合作,提升代码质量和游戏体验。
|
17天前
|
供应链 JavaScript 前端开发
使用Django和Vue实现电子商务网站的后端和前端
【4月更文挑战第10天】本文介绍了使用Django和Vue构建电子商务网站的后端与前端方法。Django作为Python的Web框架负责后端,其模型-视图-控制器设计简化了商品管理、购物车和订单处理。Vue.js用于前端,提供数据驱动和组件化的用户界面。通过定义Django模型和视图处理请求,结合Vue组件展示商品和管理购物车,开发者可构建交互性强的电商网站。虽然实际开发涉及更多细节,但本文为入门提供了基础指导。
|
1月前
|
前端开发 JavaScript Java
springboot+vue实现用户统一认证、管理-前端实现
springboot+vue实现用户统一认证、管理-前端实现
27 0
|
1月前
|
前端开发 JavaScript 容器
前端vw自适应解决方案,适用pc端以及移动端,适用webpack以及vite,适用vue以及react
前端vw自适应解决方案,适用pc端以及移动端,适用webpack以及vite,适用vue以及react
72 0
|
1月前
|
Web App开发 JavaScript 前端开发
2024年纯前端VUE在线编辑微软Office/金山WPS的Word/Excel文档
现在,随着数字化进程渗透到到各行各业,数据安全已经成为了数字化革命中的重要组成部分,而在线Office成在OA、ERP、文档系统中得到了广泛的应用,为我国的信息化事业也做出了巨大贡献。随着操作系统、浏览器及Office软件的不断升级和更新换代,加上国家对信息化、数字化系统要求的不断提升,一些厂家的WebOffice控件产品不断被淘汰出局,而现存的几个产品也存在以下几个问题:
422 1
2024年纯前端VUE在线编辑微软Office/金山WPS的Word/Excel文档