Javascript 如何通过Vue组件中的Jquery从bootstrap 4附加到模式关闭事件？

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

也就是说，我正在尝试捕捉/钩住/聆听模态结束事件。我已经将模态创建为组件，仅当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);
        });
    }

这个应用程序有两个组件作为modals工作，所以这里有两个语句。这似乎是两者中比较干净的选择

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

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

因此，当存储中没有“selectedContact”对象时，页面上就不会创建EditContactModal div。目前，我认为我可以将其保留在App.vue中，但我当然愿意进一步思考这个问题

---

最后，我非常喜欢向父级发出模式关闭事件的建议。也就是说，我仍然需要附加到侦听器的文档，这也意味着我需要从组件中取消附加侦听器。考虑到这一点，并且我有两个这样的组件可以实现这一点，最简单的方法是将代码留在App.vue组件中。

假设您有一个模态组件

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();
});

您可能在组件的挂钩中创建/安装了上述附件

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

解决上述问题

您需要从方法中删除动态作用域，以便

此

引用

vue

，以使分派代码正常工作。将

函数

声明更改为

箭头函数

，以进行词汇绑定

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

现在，上述更正将解决

分派

商店

操作

的问题

我还想介绍当您想在组件

层次结构中向上移动时，从组件发出
事件

Modal
组件可以发出一个
事件
来通知
父组件有关某件事情

Ex-在
模态组件中

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

现在，这将通知您的
父组件

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

在家长中，你可以听


如果您需要任何更具体的信息，请在评论中告诉我
我从未将jquery与vue一起使用过，上述关闭模式方法是否存在于任何组件中？你想在模态关闭的时候听吗？这是你的问题吗？是的，就是这个问题。我实际上使用的是Bootstrap、Jquery和Vue，这对我来说似乎很繁重，但我才刚刚开始。我知道引导模式会发出一系列事件，但我不确定如何将我的Vue组件与“hide.bs.modal”事件连接起来。我很接近正确的答案，但是如果没有你的帖子谈论词汇范围，我是不会得到它的。我明天会给你奖金（贴完后的头24小时内我是不被允许的）。哇。我已经挣扎了一个星期，试图找出这个问题。我不知道（）=>如何将“this”关键字绑定到调用函数的上下文。这解决了问题。现在，我正在为什么才是最佳实践而苦苦挣扎。我会更新我的答案来解释。也就是说，你很可能会得到赏金，因为这正是我需要的信息。非常感谢。很乐意提供帮助：）实际上，另一种方法或者说练习是使用eventbus，但相信我，您使用的模式更有用，即使用vuex。在eventbus中，你需要多照顾听众。只要尽量避免在将来的组件中使用jquery，就可以了