javascript - 如何在 Vue 组件中通过 Jquery 附加到 Bootstrap 4 中的模式关闭事件？

Question

我有一个 Vue JS 项目，我在 index.html 页面中引用了 Bootstrap 4 以及 Jquery。我还通过 npm 包含了 JQuery。我知道这有很多问题，但我不知道该怎么办。

也就是说，我正在 try catch / Hook /监听模式关闭事件。我将模态创建为组件，仅当 vuex 存储中存在某个对象时才会呈现这些组件。我已经在父组件和作为相关模态的子组件中尝试了以下所有操作。到目前为止我尝试过的一切似乎都不起作用。

非常欢迎任何建议。

在组件的标签中:

jq(document).ready(function() {
    jq('#EditContactModal').on('hidden.bs.modal', function() {
        // eslint-disable-next-line no-console
        console.log('MODAL HIDDEN');
        //this.ModalCanceled();
    });
});

jq('#EditContactModal').on('hidden.bs.modal', function() {
    // eslint-disable-next-line no-console
    console.log('MODAL HIDDEN');
    //this.ModalCanceled();
});

我尝试过的一件事是:

jq(document).ready(function() {
    jq('body').on('click', '#EditContactModal', function () {
        // this.Close();
        this.newEmployee = null;
        this.$store.dispatch('setSelectedContact', null);
    });
});

但是，最后一点有一个有趣的问题，即抛出“TypeError:无法读取未定义的属性‘dispatch’”错误。就像我无法在任何 JQuery 代码中使用任何 vue 对象一样。

**** 编辑 1 - 根据 Satyam Pathak 的评论解决方案 ****

所以萨蒂扬的答案正是我所需要的。我已经通过两种方式实现了这一点，并且正在反复讨论哪种方式是更好的实践。老实说我不知道​​。

首先将以下内容添加到我的 EditContactModal 组件中:

    created() {
        jq(document).on('hide.bs.modal', () => {
            // eslint-disable-next-line no-console
            // console.log('MODAL HIDDEN');
            this.newEmployee = null;
            this.$store.dispatch('setSelectedContact', null);
        });
    },
    beforeDestroy() {
        //remove listener since it's attached to the document and will remain even after
        //this component is destroyed
        jq(document).off('hide.bs.modal');
    },

无论出于何种原因，提供“#EditContactModal”选择器都不起作用。该事件从未正确附加。因此，我必须将监听器附加到文档中。这是在 Created() 事件中完成的。一个有趣的副作用是，即使组件因调用“setSelectedContact”变元而被销毁，监听器仍然存在。这意味着每次重新创建组件时都会附加另一个组件。为了解决这个问题，我在 beforeDestroy() 中添加了代码以从文档中取消附加监听器。

所有这些都运行良好。

我尝试的另一个解决方案是在父组件中处理这个问题，这恰好是我的 App.vue 组件。这是代码:

    created() {
        jq(document).on('hide.bs.modal', () => {
            this.$store.dispatch('setSelectedContact', null);
            this.$store.dispatch('setSelectedAddress', null);
        });
    }

该应用程序有 2 个用作模式的组件，因此这里有 2 个语句。这似乎是两者中更干净的选择。

我确实希望我能让“#EditContactModal”选择器正常工作，但我猜这不起作用，因为组件在 App.vue 中呈现的方式存在生命周期问题。我的意思是这样的:

<EditContactModal v-if="this.selectedContact"></EditContactModal>

因此，当商店中没有“selectedContact”对象时，页面上就不会创建 EditContactModal div。目前，我认为我可以将其保留在 App.vue 中，但我当然愿意接受有关该主题的任何进一步想法。

最后，我更喜欢向父级发出模式关闭事件的建议。也就是说，我仍然需要附加到监听器的文档，这也意味着我需要从组件中取消附加监听器。鉴于此，并且我有 2 个这样的组件来执行此操作，最简单的方法是将代码保留在 App.vue 组件中。

Answer 1

假设你有一个模态组件Modal并在其中附加此监听器

jq(document).ready(function() {
    jq('#EditContactModal').on('hidden.bs.modal', function() {
        // eslint-disable-next-line no-console
        console.log('MODAL HIDDEN');
        //this.ModalCanceled();
    });
});

jq('#EditContactModal').on('hidden.bs.modal', function() {
    // eslint-disable-next-line no-console
    console.log('MODAL HIDDEN');
    //this.ModalCanceled();
});

您可能在 created/mounted 中执行上述附件组件的钩子(Hook)。

this last bit has the interesting issue of throwing a "TypeError: Cannot read property 'dispatch' of undefined" error. It's like I can't use any of the vue objects within any of the JQuery code.

解决上述问题

您需要从方法中删除动态作用域，以便 this指vue使您的调度代码正常工作。更改function声明arrow functions从词法上绑定(bind)它。

jq(document).ready(() =>{
    jq('body').on('click', '#EditContactModal',  () => {
        this.newEmployee = null;
        this.$store.dispatch('setSelectedContact', null);
        // Now you won't get the error
    });
});

现在上述更正将解决您的问题 dispatching商店action .

我还想介绍一下emitting当您想要在组件中向上移动时来自组件的事件 hierarchy

Modal组件可以发出 event通知parent关于某事的组件

例如 - 在您的 Modal 中组件

jq(document).ready(() => {
    jq('#EditContactModal').on('hidden.bs.modal', () => {
        this.$emit('modalClosed')
    });
});

现在这将通知您的Parent组件

在家长中你可以听

<Modal @modalClosed="doSomething()" />

如果您需要更多具体信息，请在评论中告诉我