Vue3警告：[Vue warn] Extraneous non-emits event listeners (changeParentProps) were passed to component

最新推荐文章于 2024-08-14 17:09:30 发布

m0_67392409

最新推荐文章于 2024-08-14 17:09:30 发布

阅读量1.5k

点赞数 2

分类专栏：前端 html 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_67392409/article/details/123371133

版权

前端同时被 2 个专栏收录

33 篇文章 2 订阅

订阅专栏

html

33 篇文章 1 订阅

订阅专栏

在Vue3中组件通信中（子传父）报出如下警告：

[Vue warn]: Extraneous non-emits event listeners (changeParentProps) 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: [‘changeParentProps’]

<template>
  <div>
    子组件
  </div>
  <button @click="changeParentProps">更改父组件传过来的props</button>
</template>
<script lang="ts">
import { defineComponent } from '@vue/composition-api'
export default defineComponent({
  emits: ['changeParentProps'],
  props: {
    data: {
      type: String,
      default: ''
    }
  },
  setup (props, { emit }) {
    // console.log(props)
    const changeParentProps = () => {
      emit('changeParentProps', '123')
    }
    return {
      changeParentProps
    }
  }
})
</script>