vue（脚手架开发中）main.js中引入后的vant（Toast）为什么还要在使用时手动引入

差异原因

1. Tabbar 不需额外引入：
   • Tabbar 和 TabbarItem 是组件，通过 Vue.use() 全局注册后，可在任何 .vue 文件的 <template> 中直接使用（如 <van-tabbar>）。
   • 全局注册的组件会自动被模板识别，无需再次引入。
2. Toast 需要引入或通过 this 调用：
   • Toast 是一个函数式组件（插件方法），通过 Vue.use(Toast) 注册后挂载到 Vue 原型上（this.$toast），但不能作为模板标签使用。
   • 使用时需在 JS 中调用，若不依赖 this，则需显式 import { Toast } from 'vant'。

使用示例

• Tabbar：

  vue

  收起自动换行复制

  <template> <van-tabbar> <van-tabbar-item>首页</van-tabbar-item> </van-tabbar> </template>

• Toast：
  • 使用 this.$toast（全局注册后）：

    <script> export default { methods: { showToast() { this.$toast('提示信息'); } } }; </script>

  • 显式引入：

    <script> import { Toast } from 'vant'; export default { methods: { showToast() { Toast('提示信息'); } } }; </script>

根本原因

• 组件 vs 函数：
  • Tabbar 是组件，适用于模板。
  • Toast 是函数式 API，适用于 JS 调用。
• 作用域：
  • 全局组件直接在模板中可用。
  • Toast 需通过 JS 上下文（this 或导入）访问。

解决方案

1. 使用 this.$toast，无需额外引入（推荐）。
2. 在特定场景下显式 import { Toast } from 'vant'。

结论

• Tabbar 是全局组件，模板中直接可用。
• Toast 是函数式方法，需在 JS 中调用，导致使用方式不同。