Javascript Vue：全局v指令在一个组件中工作，但在另一个组件中不工作

我在

main.js

Vue.directive('click-outside', {
    bind: function (el, binding, vnode) {
        el.checkOutside = (event) => {
            if (!(el == event.target || el.contains(event.target))) {
                vnode.context[binding.expression](event);
            }
        };

        document.body.addEventListener('click', el.checkOutside);
    },
    unbind: function (el) {
        document.body.removeEventListener('click', el.checkOutside)
    }
});

Vue.directive('click-outside', {/* code */});

new Vue({
    /* code */
})

在我的

Properties.vue

文件中，我使用了以下非常有效的方法：

<button id="roomBGColor" class="changeBgBtn" ref="bgColorBtn" :title="$t('room_editor.tt_room_background')"
    @click="$nextTick(()=>{changeingBG = !changeingBG})"
    v-click-outside="closeRoomBGColorEditor">
        <!--some simple html forms-->
</button>

---

除此之外，这次它不工作并抛出一个

[Vue warn]：无法解决指令：单击外部

错误。

Properties.vue

或

LogoMenu.vue

都没有使用类似于

import vue

或类似的导入。我真的不明白为什么它在一个文件中工作而在另一个文件中不工作。有什么想法吗？

我有点想通了。为了让它正常工作，我必须确保在

main.js

Vue.directive('click-outside', {
    bind: function (el, binding, vnode) {
        el.checkOutside = (event) => {
            if (!(el == event.target || el.contains(event.target))) {
                vnode.context[binding.expression](event);
            }
        };

        document.body.addEventListener('click', el.checkOutside);
    },
    unbind: function (el) {
        document.body.removeEventListener('click', el.checkOutside)
    }
});

Vue.directive('click-outside', {/* code */});

new Vue({
    /* code */
})

---

我仍然不明白为什么它在一个组件中有效，而在另一个组件中无效，但我无法从头开始重现该场景，因此我觉得它将始终是一个谜（如果您知道真正的答案，尽管请毫不犹豫地将其保留在下面）。

您能在CodeSandbox上重现该问题吗？虽然我似乎一直都无法让它工作