时间戳

首页 > 解决方案 > [Vue 警告]：使用带有参数的 mixin 时无法挂载组件

javascript - [Vue 警告]：使用带有参数的 mixin 时无法挂载组件

问题描述

从昨天开始，我一直在努力创建一个带有参数的 Vue mixin，我得到了一个 [Vue warn]: Failed to mount component: template or render function not defined。这是我的 JS 文件，包括 mixin：

export default (dataObject) => ({
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    updateValue(newValue) {
      this.inputValue = newValue
    }
  },
  mounted() {
    this.$bus.$on('value-changed', this.updateValue)
  },
  beforeDestroy() {
    this.$bus.$off('value-changed');
  },
  computed: {
    filteredData() {
      if (this.inputValue !== '') {
        let newData = Object.keys(dataObject)
          .filter(key => key.includes(this.inputValue))
          .reduce(
            (newData, current) => ((newData[current] = dataObject[current]), newData), {}
          )
        return newData
      } 
      else return dataObject
    }
  }
})

这是我的 Vue 组件：

import searchLogic from '../logic/searchLogic.js'
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['champions']),
  },
  mixins: [searchLogic(this.champions)] 
}

导入此文件有效，因为当我尝试导入没有参数的普通 mixin 时，它可以正常工作。我也尝试过champions，"champions"而不是this.champions但似乎没有工作。mixin有问题吗？我读到可以返回一个函数，该函数返回一个对象以在创建 mixins 时使用参数。

标签： javascriptvue.jsvue-componentmixinsvue-mixin

解决方案

根据这篇文章，您应该能够静态传递参数，但不能动态传递。 https://forum.vuejs.org/t/pass-parameters-to-a-mixin-method/26401/3

但是，我从您收到的警告和您共享的代码中可以看出，您没有使用 .vue 文件中的模板属性或模板元素为组件定义任何模板。

推荐阅读