Composition API 使用这个
2021-01-04
2764
我正在使用带有 Composition API 的 Vue 3,并且我想使用第三方包(例如
@meforma/vue-toaster
),并且应该像这样使用(在 Options API 中):
import Toaster from '@meforma/vue-toaster';
createApp(App).use(Toaster).mount('#app')
然后在组件中:
this.$toast.show(`Hey! I'm here`);
this.$toast.success(`Hey! I'm here`);
this.$toast.error(`Hey! I'm here`);
this.$toast.warning(`Hey! I'm here`);
this.$toast.info(`Hey! I'm here`);
但是
this
在 Composition API 的
setup()
函数中不起作用。
3个回答
@meforma/vue-toaster
在应用程序上下文中安装
$toast
,可通过
setup()
中的
getCurrentInstance().appContext.globalProperties
访问:
<template>
<button @click="showToast">Show toast</button>
</template>
<script>
import { getCurrentInstance } from 'vue'
export default {
setup() {
const $toast = getCurrentInstance().appContext.globalProperties.$toast
return {
showToast() {
$toast.show(`Hey! I'm here`)
$toast.success(`Hey! I'm here`)
$toast.error(`Hey! I'm here`)
$toast.warning(`Hey! I'm here`)
$toast.info(`Hey! I'm here`)
setTimeout($toast.clear, 3000)
}
}
}
}
</script>
更新:
getCurrentInstance()
是
内部 API
,因此可随时将其移除。请谨慎使用。
tony19
2021-01-05
我遇到了同样的问题。
所以我找到了一种简单的方法:
顺便说一下,我正在使用 Vite。
我的
main.js
import { createApp } from 'vue'
import App from './App.vue'
import Toaster from '@meforma/vue-toaster';
let app = createApp(App)
app.use(Toaster, {
position: 'top-right'
}).provide('toast', app.config.globalProperties.$toast)
app.mount('#app')
我的组件:
import { inject } from 'vue'
export default {
name: 'table-line',
setup(props) {
const toast = inject('toast');
toast.success(`it works !`)
return {toast}
}
}
希望它能有所帮助
user3190147
2022-01-19
setup 函数在组件创建前运行一次。它缺少
this
上下文,而且可能不是您想要放置它们的位置。您可以尝试将其放入可以通过按钮调用的方法中。
Daniel
2021-01-04