Javascript 在Vue js中的其他类中发出单击

我有两个Vue js类，它们控制不同的html块（我每个都有

script

标记，因为我有服务器端模板渲染）

新Vue({
el:“#站点标题”，
分隔符：['['，']]']，
数据：{
showModal:'无'，
},
方法：{
displaymodel（）{
如果（this.showmodel==='none'）{
this.showmodel='block'；
}否则{
this.showModal='none'；
}
},
},
})

第二个呢

<div class="row" style="margin-top: 30px" id="car_pre_reserve">
   <textarea v-model="messageSender" id="direct-message" placeholder="Your message here..."></textarea>
   <button v-on:click="sendMessage()" class="button" type="button">SEND MESSAGE</button>
</div>

    new Vue({
        el: '#car_pre_reserve',
        delimiters: ['[[', ']]'],
        data() {
            return {
                messageSender: '',
            }
        },
        methods: {

            sendMessage() {

                        this.messageStatusDisplay = 'block';
                        setTimeout(() => {
                            this.messageStatusDisplay = 'none';
                        }, 10000);

            },
        },
    });

发送消息
新Vue({
el:“汽车预订”，
分隔符：['['，']]']，
数据（）{
返回{
messageSender:“”，
}
},
方法：{
sendMessage（）{
this.messageStatusDisplay='block'；
设置超时（（）=>{
this.messageStatusDisplay='none'；
}, 10000);
},
},
});

---

问题是，我可以从不同的vue类调用

displaymodel（）

？如何做到这一点？

哈，这很容易

我给变量赋值

var header = new Vue({...})

---

然后在第二个类中，只需调用

header.displaymodel（）

如果这两个组件不在父子关系中，您可以尝试在

$root

范围上发出事件。如果您想在页面上使用两个不同的应用程序，可以使用全局窗口对象中的变量相互链接。已装入的应用程序1:window.myOwnFunction={popup1:this.sendMessage}App 2某处：someMethod（）{window.myOwnFunction.popup1（）；}

var header = new Vue({...})