Extraneous non-emits event listeners (xxxXxx) were passed to component but could not be automaticall

在使用Vue3.0时出现Extraneous non-emits event listeners (xxxXxx) were passed to component but could not be automaticall警告，完整警告信息如下：

[Vue warn]: Extraneous non-emits event listeners (addOne) 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 <Counter count=1 onAddOne=fn<bound parentAddOne> > at <App>

伪代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Hello World</title><script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root">
</div>
</body>
<script>const app = Vue.createApp({data() {return {num: 1}},methods: {parentAddOne() {this.num += 1;console.log("子组件将父组件中的num+1");}},template: `<div><counter :count="num" @add-one="parentAddOne"/></div>`});app.component('counter', {props: ['count'],methods: {addOne() {// 子组件内部向外触发一个addOne的事件this.$emit('addOne');}},template: `<button @click="addOne">按钮</button><div> 子组件中的count：{{count}} </div>`})app.mount("#root")
</script>
</html>

出现此错误的原因是子组件counter向外触发一个addOne的事件，但是无法自动继承，因为传递事件的子组件没有根节点，他在父组件中渲染为代码片段(可以看到counter的template中有两个根节点)。
第一种解决方式（给两个根节点嵌套一个div）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Hello World</title><script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root">
</div>
</body>
<script>const app = Vue.createApp({data() {return {num: 1}},methods: {parentAddOne() {this.num += 1;console.log("子组件将父组件中的num+1");}},template: `<div><counter :count="num" @add-one="parentAddOne"/><div> 父组件中的num：{{num}}</div></div>`});app.component('counter', {props: ['count'],methods: {addOne() {this.$emit('addOne');}},template: `<!-- 在这里 --><div><button @click="addOne">按钮</button><div> 子组件中的count：{{count}} </div></div>`})app.mount("#root")
</script>
</html>

第二种解决方式（在emits属性中声明自定义事件）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Hello World</title><script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root">
</div>
</body>
<script>const app = Vue.createApp({data() {return {num: 1}},methods: {parentAddOne() {this.num += 1;console.log("子组件将父组件中的num+1");}},template: `<div><counter :count="num" @add-one="parentAddOne"/><div> 父组件中的num：{{num}}</div></div>`});app.component('counter', {props: ['count'],// 在这里emits: ['addOne'],methods: {addOne() {this.$emit('addOne');}},template: `<button @click="addOne">点击+1</button><div> 子组件中的count：{{count}} </div>`})app.mount("#root")
</script>
</html>

第三种解决方式（不使用props，不建议使用，此写法可能影响到组件内很多使用父组件参数的地方）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Hello World</title><script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root">
</div>
</body>
<script>const app = Vue.createApp({data() {return {num: 1}},methods: {parentAddOne() {this.num += 1;console.log("子组件将父组件中的num+1");}},template: `<div><counter :count="num" @add-one="parentAddOne"/><div> 父组件中的num：{{num}}</div></div>`});app.component('counter', {methods: {addOne() {this.$emit('addOne');}},template: `<button @click="addOne">按钮</button><div> 子组件中的count：{{this.$attrs.count}} </div>`})app.mount("#root")
</script>
</html>

Extraneous non-emits event listeners (xxxXxx) were passed to component but could not be automaticall相关推荐

[vue]Extraneous non-emits event listeners (x) were passed to component but could not be automatica
vue报错说: [Vue warn]: Extraneous non-emits event listeners (addToCart) were passed to component but co ...
Vue3报错：Extraneous non-props attributes (ref_key) were passed to component but could not be automatic
Vue3报错:Extraneous non-props attributes (ref_key) were passed to component but could not be automatic ...
让页面滑动流畅得飞起的新特性：Passive Event Listeners
声明:本文来自腾讯增值产品部官方公众号小时光茶社,为CSDN原创投稿,未经许可,禁止任何形式的转载. 作者:陈志兴,腾讯高级工程师,11年毕业后加入腾讯,期间主要负责过QQ文件传输质量优化.本地文件共 ...
Passive Event Listeners
vue3中写项目时,Chrome提示以下信息: [Violation] Added non-passive event listener to a scroll-blocking 'wheel' ev ...
were passed to component but could not be automatically inherited because component renders fragment
自定义VUE子组件需要用div包裹 <div> <selfcontrol /> </div>
Vue3+ Vue-cli (2) 组件篇
目录一.全局组件定义和复用性讲解二.Vue3中的局部组件三.父子组件的静态和动态传值四.组件传值时的校验操作五.组件中重要机制 - 单项数据流六.Non-props使用技巧七.组件中通过 ...
WebKit DOM Event (一)
DOM Event 规范 DOM Event 主要定义了三类接口: EventTarget, 所有DOM节点和XMLHttpRequest 都实现EventTarget接口 class EventTa ...
[Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel‘ event.
在基于 Element-ui 写项目的时候,Chrome 提醒: [Violation] Added non-passive event listener to a scroll-blocking ' ...
【难得偷闲动动笔】开发问题记录（二）：Extraneous non-props attributes
1.今天在用vue3时,遇到了一个警告: Extraneous non-props attributes (class) were passed to component but could not ...
[Violation]Added non-passive event listener to a scroll-blocking ‘touchstart‘ event.
Chrome警告: Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking ...

Extraneous non-emits event listeners (xxxXxx) were passed to component but could not be automaticall

Extraneous non-emits event listeners (xxxXxx) were passed to component but could not be automaticall相关推荐

最新文章

热门文章