使用组合 API 插件的 Vue 2 中功能组件（同时正常工作）的未定义侦听器错误

Question

我在功能组件上遇到以下错误（使用 Vue 2 的组合 API 插件）。

[Vue warn]: Property or method "listeners" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

[Vue warn]: Error in data(): "TypeError: can't define property "ob": Object is not extensible"

奇怪的是监听器按预期工作...但仍然抛出错误。有什么想法吗？

<template functionnal>
  <span
    :class="[ 'tag', { 'little': props.little }]"
    v-on="listeners"
  >
    <slot></slot>
  </span>
</template>

<script lang="ts">
import { defineComponent } from '@vue/composition-api';

export default defineComponent({
  props: {
    little: {
      type: Boolean,
      default: false
    }
  },
  setup(props, { listeners }) {
    return {
      props,
      listeners
    };
  }
});
</script>

<style lang="scss" scoped>
.tag {
  display: flex;
  align-items: center;
  height: 1em;
  padding: 0.6em 0.75em;
  border-radius: 16px;
  font-family: Interstate-Black;
  font-size: 0.90rem;
  color: white;
  background-color: black;
  white-space: nowrap; // do not use a carriage return for long named tags, expand the tags instead

  &.little {
    font-size: 0.75rem;
  }
</style>

Answer 1

您的模板中有一个拼写错误：functionnal 应该是 functional。

否则，您的代码应该可以正常运行，如 codesandbox 所示。

使用组合 API 插件的 Vue 2 中功能组件（同时正常工作）的未定义侦听器错误

Undefined listeners error on functional component (while working correctly) in Vue 2 with the composition API plugin

javascript

vue.js

vuejs2

vue-composition-api