Vue 3 与 Vant：正确解决 Dialog 和 Toast 的导入错误

在 Vue 3 中使用 Vant UI 库时，开发者经常会遇到一个恼人的错误：在导入 Dialog 和 Toast 组件后，在组件中使用时会报 "not defined" 的错误。此错误源于 Vue 3 中 this 上下文的改变，导致组件无法直接访问全局变量。

为了解决这一问题，有两种可行的解决方案：官方推荐方法和自定义方法。

官方方法

官方推荐的方法是使用 getCurrentInstance 方法，它返回当前组件实例。然后，我们可以使用 proxy 属性来访问组件上下文。

在 main.js 中：

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

const app = createApp()
app.component('MyComponent', {
  setup() {
    const { proxy } = getCurrentInstance()
    proxy.$dialog = Dialog
    proxy.$toast = Toast
  },
})

在组件中：

<template>
  <div>
    <van-dialog v-model="dialogVisible" />
    <van-toast v-model="toastVisible" />
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const dialogVisible = ref(false)
    const toastVisible = ref(false)

    return {
      dialogVisible,
      toastVisible,
    }
  },
}
</script>

自定义方法

另一种方法是创建自定义指令来访问组件上下文。

在 main.js 中：

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

const app = createApp()
app.directive('vant', {
  mounted(el, binding) {
    el.$dialog = Dialog
    el.$toast = Toast
  },
})

在组件中：

<template>
  <div>
    <van-dialog v-vant v-model="dialogVisible" />
    <van-toast v-vant v-model="toastVisible" />
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const dialogVisible = ref(false)
    const toastVisible = ref(false)

    return {
      dialogVisible,
      toastVisible,
    }
  },
}
</script>

通过以上两种方法，开发者可以轻松解决 Vue 3 中 Vant UI Dialog 和 Toast 组件的 "not defined" 错误，确保项目正常运行。