Question

在使用mixins时遇到问题。我不确定这是mixins本身的某些限制，还是访问mixins数据的错误；用Google搜索了我的问题，但似乎没有人报告此问题。所以让我在这里详细说明：

我一直在构建Vue应用程序，最近我修改了Vue组件。假设主要组件mainCompo包含各种子组件。

mixins，比如说viewer.js看起来像这样：

export const viewer =  {
    data() {
        return {
            foo:"bar",
            hello:"world"
        }
    },
    methods: {
        testFunc() {
           console.log("test func");
        }
    },
    computed: {
        testComputed(){
           return "123";
        }
    }

主要组件mainCompo如下所示：它包含许多组件。因此compoChildA，compoChildB和compoChildC ...等都是mainCompo的子级。

import {viewer} from 'mixins/viewer';

export default {
        components:  {
                compoChildA,
                compoChildB,
                compoChildC
        },
        mixins: [viewer],
        data() {
            //...
        }
        mounted() {
            console.log(this.testComputed);
            console.log(this.foo);
            console.log(this.hello);
            console.log(this.testFunc());
        },
        //....
}

<div>
    <compo-child-a></compo-child-a>
    <compo-child-b></compo-child-b>
    <compo-child-c></compo-child-c>
    ...
</div>

让我们以子组件compoChildA为例：

import {viewer} from 'mixins/viewer';

export default {
        mixins: [viewer],
        data() {
            //...
        }
    mounted() {
        console.log(this.testComputed);
        console.log(this.foo);
        console.log(this.hello);
        console.log(this.testFunc());
    },
    //....
}

<div>

    ...
</div>

现在，所有控制台登录到mainCompo的mounted（）挂钩中后，将按预期输出数据：

this.testComputed --> 123
this.foo --> bar
this.hello --> world
this.testFunc() --> test func

但是，对于compoChildA，结果如下：

this.testComputed --> 123
this.foo --> undefined
this.hello --> undefined
this.testFunc() --> test func

最令人困惑的部分是可以访问compute（）数据，但是没有data（）！？

所以问题是：是否暗示不能通过子组件访问mixins中的个data（）。

也就是说，我在考虑是否正确使用了mxins。我已经阅读了Vue的官方文档。该示例显示了数据也可以在mixins中设置。 mixin的用法是在组件之间共享共同的事物，因此应该有某种方法来获取mixins数据。

但是，存储也许是获取数据的更合适的方式，所以我想知道是否应该改为使用存储？

Answer 1

您不能通过使用mixins共享数据。

Mixins是一种灵活的方式来分发Vue组件的可重用功能

您应该使用Vuex通过组件实现数据共享。

Answer 2

不能通过子组件访问Mixin。我以前遇到过这样的问题。从文档中指出 “ Mixins是分发Vue组件可重用功能的灵活方法。mixin对象可以包含任何组件选项。当组件使用mixin时，mixin中的所有选项都将被“混合”到组件自己的选项中。”

用于功能而非数据。

https://vuejs.org/v2/guide/mixins.html

父组件可以获取mixins数据，但子组件则不能

2 个答案: