3

我在功能组件上遇到以下错误（使用 Vue 2 的组合 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>
4

1 回答 1

2

您的模板中有一个错字：functionnal应该是functional.

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

于 2020-08-10T07:24:26.537 回答