vue3警告Extraneous non-emits event listeners (XXX) were passed to component but could not be automatic

这篇具有很好参考价值的文章主要介绍了vue3警告Extraneous non-emits event listeners (XXX) were passed to component but could not be automatic。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue3 警告Extraneous non-emits event listeners (selectMeth) 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”选项声明它。

这里使用两种方式改正 emits 选项。

第一种,setup之外:

export default {
  //提前声明你要使用的自定义事件
  emits: ['modelValue'],
  ......
  mounted(){
	this.$emit('modelValue','hello world')
  },
  setup(){
  	......
  }
}

第二种,setup之内:文章来源地址https://www.toymoban.com/news/detail-706849.html

<script setup>
    //提前声明你要使用的自定义事件
	const emit = defineEmits(['modelValue'])
	emit('modelValue', 'hello world')
</script>

到了这里,关于vue3警告Extraneous non-emits event listeners (XXX) were passed to component but could not be automatic的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • 【vue3】vue3接收props以及emit的用法

    技术 :vue3.2.40 UI框架 :arco-design 2.44.7 css技术 :less 4.1.3 实现 :子组件接收props以及通过emit方法传值父组件 vue3使用的组合式API,我这里使用的是defineComponent 1.setup里如果需要接收props和使用emit,只需要带参数 setup(props, { emit }) 2.setup里面只需要带emit(‘handleCancel’),不需要带

    2024年02月15日
    浏览(18)
  • Vue3----props和emit的使用

    Vue3----props和emit的使用

    用途:当有一种类型的组件需要被使用多次,每一次的调用都只是特定的地方不同,就好像一张个人简介表,每次填的人的信息都不同,但是结构都是一样的。 在父组件里面引入子组件,通过子组件的标签属性传递参数,在子组件里面定义一个props选项进行接收使用,要注意

    2023年04月11日
    浏览(10)
  • 【vue3 之 emits & $emit() 讲解 】监听子组件事件、emit事件验证、options写法、composition setup写法

    前言:不懂在父组件里对子组件 @xxxx 声明自定义事件,就不用看本篇文章了。本篇对此内容不做任何说明。这是与 emits 结合使用的必备知识! 场景说明: 组件功能封装:         组件封装了一系列 emit 事件,并返回数据、回调函数等,或单纯执行某个操作后,触发父组

    2023年04月09日
    浏览(10)
  • vue3中emit(‘update:modelValue‘)使用

    父 子(setup语法糖) 子(常规写法)

    2024年02月06日
    浏览(12)
  • vue3中setup的两个参数 props,context (attrs,emit,slots),vue3中的双向数据绑定自定义事件emit和v-model

    vue3中setup的两个参数 props,context (attrs,emit,slots),vue3中的双向数据绑定自定义事件emit和v-model

    目录 setup函数 props参数 案例 第一种写法(用setup函数的方式):  第二种方法(语法糖形式即setup写入script标签中)也可以传值,  context (attrs,emit,slots) vue3中的双向数据绑定自定义事件emit和v-model emit自定义事件 v-model 有两个参数分别是 props,context 即 props参数是一个 对象 ,

    2024年02月10日
    浏览(10)
  • Vue3的Props与Emit一目了然,直观使用

    父页面 子页面 父页面 子页面 有问题欢迎大家指教,谢谢~

    2024年02月09日
    浏览(15)
  • vue3 中使用 props, emits 并指定其类型与默认值

    前言 本文主要描述 vue3 中 defineProps 与 defineEmits 分别在 JS 环境和 TS 环境中的使用方法。 defineProps 的使用 defineProps 在使用的时候无需引入,默认是全局方法。 在 js 开发的 vue3 项目中使用 js 环境中使用与 vue2 的使用方法类似,只是选项式 API 换成了组合式 API。定义 props 类型

    2024年02月05日
    浏览(9)
  • Vue3 setup tsx 子组件向父组件传值 emit

    Vue3 setup tsx 子组件向父组件传值 emit

    需求: Vue3 setup 父组件向子组件传值,子组件接收父组件传入的值;子组件向父组件传值,父组件接收的子组件传递的值。 父组件: parent.tsx : 子组件: TotalPreview.tsx : 页面效果:

    2024年02月13日
    浏览(14)
  • vue3中的event bus

    event Bus在vue3中事实上已经被删除了,因为官方说它可能会导致一些潜在的问题。如,在大型项目中使用 Event Bus 可能会变得难以维护和调试,同时也可能会影响应用程序的性能。此外,在 Vue 3.x 中已经有更多先进和强大的工具来进行组件之间通信,例如 provide/inject 和 Emit/Li

    2024年02月08日
    浏览(9)
  • vue3中监听,组件通信如父子传值、Vuex、Event Bus的使用

    目录 一、监听 二、父子传值: 1、父传子: 2、子传父 三、全局状态管理(Vuex): 四、事件总线(Event Bus): 我们有一个父组件ParentComponent和一个子组件ChildComponent。在父组件中,我们使用:childProp=\\\"parentData\\\"将数据传递给子组件。在子组件中,我们使用defineProps来接收父组件

    2024年02月13日
    浏览(13)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包