故障排除vue扩展故障

Question

我有一个非常简单的混合器，似乎没有使用nuxt。它是如此的基本，我在我的whits结束，试图找出错误。我的组件是一个相当复杂的表单组合方案的一部分，但是mixin非常简单。

我组件中的脚本简化了

import { VInput } from 'vuetify'
import FieldMask from '~/utils/FieldMask'
import CognitoField from '~/mixins/cognitoField'
export default {
  name: 'CognitoBaseField',
  extends: [VInput, CognitoField],
  props: {
    inlineLabels: { default: true },
    noIndependantSubmission: Boolean,
    groupEdit: false,
    cognitoName: '',
    displayValue: '',
    fieldValue: '',
    placeHolder: { defalut: 'enter text' },
    label: '',
    masker: { type: Function, default: FieldMask },
    items: [],
    selected: {},
    itemText: '',
    itemValue: '',
    showForm: Boolean,
    disableEnterKeySubmission: Boolean,
  },
  data() {
    return {
      value: '',
      formActive: false,
    }
  },
  methods: {
    onCancelClick() {
      this.value = ''
      this.formActive = false
      console.log('test mixin')
      console.log(this.thisIsATest())
    },
  },
}

我的混音-逐字

export default {
  computed: {
    testComp() {
      return 'working'
    },
  },
  methods: {
    thisIsATest() {
      return 'working'
    },
  },
}

这里的结果是我在组件上触发了onCancelClick，并且页面崩溃了

TypeError: this.thisIsATest is not a function

要在这个问题中真正包含组件的可用版本，我需要共享许多组件，所以可能不需要它。除非有人能明显地看到一个明显的错误，我想真正的问题是如何进一步解决这个问题？

Answer 1

这样就行了

<script>
import CognitoField from '~/mixins/cognitoField'

export default {
  name: 'CognitoBaseField',
  mixins: [CognitoField],
}
</script>

关于文档，这个模式不是更长时间的推荐。可合成性的使用在几个方面都比较好。