Javascript vueJS上的全局消息（notif）调用

可能是个老生常谈的问题，但我还不明白

我有一个总在应用程序中加载的主组件

我们给他打电话吧

DefaultContainer.vue

<template>
    <div class="app">
     .... Notification List
   </div>
</template>

一切正常

但是为了在另一个组件中使用它，例如，对于一个单独的页面，我必须每次指定这个库并进行调用

是否可以以某种方式访问DefaultContainer 并在不宣布的情况下调用此消息

import VueNotifications from 'vue-notifications'    

及

例如，测试页面已打开

Test.vue

<template>
    <div>
     <button @click="onNotificationShow()"  >button</button>
   </div>
</template>

export default {
    data: () => {
        return { 
        ......
        }
    },
    methods: {
        onNotificationShow() {        
           this.showInfoMsg({ message: 'Show on Test.vue'});
           //this i have error becouse showInfoMsg undefined
           //I need to call showInfoMsg from DefaultContainer
        }
    }
}

按钮
导出默认值{
数据：（）=>{
返回{
......
}
},
方法：{
onNotificationShow（）{
this.showInfoMsg（{message:'Show on Test.vue'}）；
//由于showInfoMsg未定义，因此我有此错误
//我需要从DefaultContainer调用showInfoMsg
}
}
}

无论打开的页面如何，DefaultContainer.vue始终存在

按结构->加载vue

main.js（静态srcipt）

App.vue+路由器（静态vue+srcipt）

DefaultContainer.vue（静态vue-这是notificationBar）

pageVue（test.vue或test2.vue）（动态vue可以更改-这是用户的数据页）

---

我可以在vue中调用此方法吗？

您可以制作一个组件

MyVueNotification.vue

，然后在任何地方使用该组件：

//MyVueNotificaton.vue
按钮
从“vue通知”导入VueNotifications
导出默认值{
数据：（）=>{
返回{
信息：[]
}
},
方法：{
onNotification（消息）{
this.showInfoMsg（{message:message}）；
}
},
通知：{
ShowSuccesssg：{
类型：VueNotifications.types.success，
标题:"成功",，
信息：“这就是成功！”
},
showInfoMsg：{
类型：VueNotifications.types.info，
标题：“信息”，
信息：“这是给你的一些信息”
},
showwarnmg：{
类型：VueNotifications.types.warn，
标题：“警告”，
信息：“这是一种警告”
},
邮件：{
类型：VueNotifications.types.error，
标题：“错误”，
信息：“这就是错误”
}
}
}

如果您使用所有必要的方法等制作按钮，那么该按钮将成为一个组件并从任何地方重用该组件如何？他已经在任何地方使用，因为DefaultContainer是静态的，并且在所有页面上都存在。是的，但是

DefaultContainer

是一个不同的对象。在

onNotificationShow（）

method（Test.vue）

中，此
指的是Test.vue（不是
DefaultContainer.vue
），并且
showInfoMsg（）
在Text.vue中不存在。
import VueNotifications from 'vue-notifications'    

notifications: {
    showSuccessMsg: {
    ....
    }
}

<template>
    <div>
     <button @click="onNotificationShow()"  >button</button>
   </div>
</template>

export default {
    data: () => {
        return { 
        ......
        }
    },
    methods: {
        onNotificationShow() {        
           this.showInfoMsg({ message: 'Show on Test.vue'});
           //this i have error becouse showInfoMsg undefined
           //I need to call showInfoMsg from DefaultContainer
        }
    }
}