javascript - vueJS 上的全局消息 (notif) 调用

Question

可能是个陈词滥调的问题，但我还不明白。

我有一个始终加载到应用程序中的主要组件。

我们调用它

DefaultContainer.vue

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

我使用库来通知来电

npm vue-通知 并在当前组件中连接

<script>

import VueNotifications from 'vue-notifications'    
export default {
data: () => {
  return { 
    messages: []
  }
},
methods: {
  onNotification(message) {        
    this.showInfoMsg({ message: message });
  }
},

notifications: {
  showSuccessMsg: {
    type: VueNotifications.types.success,
    title: 'success',
    message: 'That\'s the success!'
  },
  showInfoMsg: {
    type: VueNotifications.types.info,
    title: 'info',
    message: 'Here is some info for you'
  },
  showWarnMsg: {
    type: VueNotifications.types.warn,
    title: 'warn',
    message: 'That\'s the kind of warning'
  },
  showErrorMsg: {
    type: VueNotifications.types.error,
    title: 'error',
    message: 'That\'s the error'
  }
}
}
</script>

当我调用方法时

this.showInfoMsg({ message: message });

一切正常

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

是否有可能以某种方式访问​​ DefaultContainer 并在不通知的情况下调用此消息

import VueNotifications from 'vue-notifications'    

和

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

比如测试页已经打开

测试.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
        }
    }
}

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

按结构->加载vue

1. main.js(静态脚本)

2. App.vue + router(静态vue + srcipt)

3. DefaultContainer.vue(静态 vue - 这是 notificationBar)

4. pageVue(test.vue 或 test2.vue)(动态 vue 可以更改 - 这是用户获取数据的页面)

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

Answer 1

你可以制作一个组件 MyVueNotification.vue 然后从任何地方使用该组件:

// MyVueNotificaton.vue

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

<script>
import VueNotifications from 'vue-notifications'    

export default {
data: () => {
  return { 
messages: []
  }
},
methods: {
  onNotification(message) {        
this.showInfoMsg({ message: message });
  }
},

notifications: {
  showSuccessMsg: {
type: VueNotifications.types.success,
title: 'success',
message: 'That\'s the success!'
  },
  showInfoMsg: {
type: VueNotifications.types.info,
title: 'info',
message: 'Here is some info for you'
  },
  showWarnMsg: {
type: VueNotifications.types.warn,
title: 'warn',
message: 'That\'s the kind of warning'
  },
  showErrorMsg: {
type: VueNotifications.types.error,
title: 'error',
message: 'That\'s the error'
  }
}
}
</script>

然后从 Test.vue 使用 MyVueNotification.vue 组件:

// Test.vue

<template>
  <div>
    <my-vue-notificaton></my-vue-notification>
  </div>
</template>

<script>
import MyVueNotification from ./MyVueNotification.vue

export default {
  components: {
    "my-vue-notification": MyVueNotification
  }
}

</script>