Question

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

当我跑步时，我似乎正在

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

这是我的mixin

<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移动到组件主范围。不在数据函数重新出现

使用mixin的计算属性的Vue组件

1 个答案: