Question

我想在网站上分享一些功能。我的网站确实有多个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吗？

Answer 1

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

var mixin = {
  data: function () {
    return {
      someProperty: null,
      someOtherProperty: 'foo'
    }
  }
}

实例和组件之间共享的vue mixin

1 个答案: