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

Question

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

[Vue警告]：属性或方法“侦听器”未在实例上定义，但在呈现期间引用。通过初始化属性，确保此属性是反应性的，无论是在数据选项中还是对于基于类的组件。

[Vue警告]：data（）中的错误：“TypeError：无法定义属性”ob“：对象不可扩展”

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

<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

模板中有一个输入错误：functional应该是functional。

否则，您的代码应该可以正常工作，如本代码沙盒所示。