Vue 组件使用 mixin 的计算属性

Question

我有一个使用 mixin 的简单组件，该组件在具有相似功能的多个组件之间共享。

当我运行它时，我似乎得到了

属性或方法“activeClass”未在实例上定义，而是在渲染期间引用。

这是我的混合

<script>
    export default {
        data() {
            return {
                opened: false,
                identity: ''
            }
        },
        computed: {
            activeClass() {
                return {
                    active: this.opened
                };
            }
        },
        created() {
            window.EventHandler.listen(this.identity + '-toggled', opened => this.opened = opened);
        },
        methods: {
            toggle() {
                window.EventHandler.fire('toggle-' + this.identity);
            }
        }
    }
</script>

和我的组件

<template>
    <span class="pointer" :class="activeClass" @click="toggle"><i class="fas fa-search"></i></span>
</template>
<script>
    import Trigger from '../../mixins/Trigger';
    export default {
        data() {
            return {
                mixins: [Trigger],
                data() {
                    return {
                        identity: 'language'
                    }
                }
            }
        }
    }
</script>

出于某种原因，我似乎无法activeClass从组件内部访问计算属性。知道为什么会这样吗？

Answer 1

尝试将 mixin 移动到组件的主要作用域。不在数据函数中