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: {
    ....
    }
}

例如，测试页已打开

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
        }
    }
}

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

按结构->加载vue

main.js（静态密码）
App.vue +路由器（静态vue + srcipt）
DefaultContainer.vue（静态vue-这是NotificationBar）
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>

在vueJS上调用全局消息（notif）

1 个答案: