在Vue3.0中定义vant的toast全部提示

以定义一个全局toast为例。

可以换一个思路，怎么在vue3中使用prototype.

挂载全局变量

在vue2中：

import { Toast } from 'vant'
import  Vue  from 'vue'
Vue.prototype.$toast=Toast;

在vue3中通过 app.config.globalProperties进行挂载：

import { createApp } from 'vue'
import { Toast } from 'vant'

const app = createApp(App);
app.config.globalProperties.$toast = Toast;
const vm = app.mount('#app')

引用全局变量

在vue2中使用this.$toast即可使用。

在vue3中：

在vue3.0中新增了组合式api setup，setup在钩子函数前执行，此时vue对象还没有this，所以可以使用getCurrentInstance代替this，使用如下：

import { getCurrentInstance } from 'vue'


 setup() {
    const { proxy } = getCurrentInstance()
   onMounted(() => {
         proxy.$toast({message: '开启失败，请稍后再试',})//这里的proxy代替this
    })
    return { }
  }