vue 2 组件中的 $(document) 事件处理答案

【问题标题】：$(document) event handling in vue 2 componentvue 2 组件中的 $(document) 事件处理
【发布时间】：2021-12-14 16:19:27
【问题描述】：

我有一些 vue 2 组件：

<template>
    <section class="component" v-if="load">
        ...
    </section>
    <div class="loader" v-else>
        ...
    </div>
</template>

<script>
export default {
    name: "myApp",
    data() {
        return {
            load: false,
        }
    },
    mounted() {
        this.initApp();
    },
    methods: {
        initApp() {
            this.load = true;
        }
    }
}
</script>

我像这样初始化它（很少使用 jquery）

if ($('#container').length > 0) {
    new Vue({
        components: {
            myApp
        },
        render: (h) => {
            return h(myApp);
        },
    }).$mount('#container');
}

另外，我在其他非 vue 代码中有全局文档的自定义事件，由 jquery 触发：

$(document).trigger('someEvent');

如何在 myApp 组件中处理此文档的 someEvent 以完全重新加载它？（此事件需要完全更新 myApp 中的内容和数据。）

【问题讨论】：

标签： javascript jquery vue.js dom dom-events

【解决方案1】：

你试过挂载钩子

mounted(){
document.addEventListener("someEvent", ()=>{

//your code after listening to the event 

}); 
}

【讨论】：