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

Question

我有一些 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 中的内容和数据。）

Answer 1

你试过挂钩吗

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

//your code after listening to the event 

}); 
}

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

$(document) event handling in vue 2 component

javascript

jquery

dom

dom-events

vue.js