4

我有一些我想在我的网站上分享的功能。我的网站确实有多个 Vue 实例，而不仅仅是一个应用程序实例入口点。

我已经像这样创建了我的 mixin：

var fooMixin = {
    data: {
        someProperty: null,
        someOtherProperty: "Foo"
    },
    methods{
       ...
    }
}

然后将这个 mixin 注入到我的 Vue 实例中，如下所示：

new Vue({
    el: '#app',
    mixins: [fooMixin],
    data: {
        ...
    },
    methods: {
        ...
    }
})

当然，这完全符合预期，但我的问题是我想在其他地方的组件中重用这个 mixin。这会导致问题。

以下是它注入组件的方式：

Vue.component('bar', {
    props: ['someProp'],
    template: barTemplate,
    mixins: [fooMixin],
    data: function () {
        return {
            mySpecialProperty: null
        }
    },
    methods: {
        ...
    }
})

可以想象，mixin 无法与data组件的属性合并。由于这是一个组件，因此 data 属性必须返回一个返回对象的函数。这不是我的 mixin 的设置方式。

这是我从 Vue 得到的错误：

[Vue 警告]：“数据”选项应该是在组件定义中返回每个实例值的函数。

我可以创建一个可跨实例和组件重用的 mixin 吗？

4

1 回答 1

0

将 mixin 中的数据属性从对象更改为函数

var mixin = {
  data: function () {
    return {
      someProperty: null,
      someOtherProperty: 'foo'
    }
  }
}
于 2021-01-13T04:47:13.957 回答