在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>
Logo

前往低代码交流专区

更多推荐