前端开发：Vue项目全局引入组件， 以及实际使用的方法

这是我参与更文挑战的第13天，活动详情查看：更文挑战

前言

前端开发的时候，在项目中引入组件以及使用是非常常见操作，但是有时候会遇到一些引入的方式不对或者其他原因造成的使用问题、引起报错等问题，尤其是对于刚入行不久的萌新来说更是要留意，本篇文章就来分享一下在Vue项目中全局引入组件的方式，以及组件在具体地方使用的方法。

本文以在Vue项目中的Vant组件下的Toast提示框的引入以及使用为例，Vant官方文档讲解有些不清楚，在这里进行了更进一步的讲解，方便不清楚的开发者使用，知识点不复杂，但是对于不熟悉的人来说还是会遇到一些小麻烦，废话不多说，具体内容如下所示。

引入方法

打开Vue项目，然后根据Vant官方文档的步骤，可以直接引入组件，这里以Toast提示框的引入来介绍，具体操作如下所示：

1、找到Vue项目的main.js文件，点击打开进入；

2、在main.js文件中引入Toast提示框，代码如下所示：

import Vue from 'vue'
import { Toast } from 'vant';

Vue.use(Toast);
复制代码

通过上面的操作，Toast提示框组件已经正确的引入到项目中了，而且可以全局使用Toast提示框。

具体使用

在正确的全局引入组件之后，接下来就是具体的使用。继续以Toast提示框的使用来介绍，具体的使用方式很简单，但是要注意的是局部引入使用的方式，Vant官方文档介绍的Toast提示框引入以及使用的方式，对于不熟悉的开发者来说会遇到一个小问题，那就是直接这样调用
Toast('提示内容');
会有报错，报错原因请看下一节内容。

报错提示

在CDN中引入的Vant，调用Toast 提示时报错 Toast is not defined，具体错误信息如下所示：

AgentDel.vue?bf94:149       Uncaught (in promise) ReferenceError: Toast is not defined  at eval
复制代码

可能有人会问，为什么已经成功的全局引入之后，为什么在使用的时候还会报错，那是因为使用的姿势不对，错误的使用方式就是上面所说的，直接使用Toast(‘XXX’);这种方式，该方式是会有问题的，正确的方式应该是直接把”Toast(‘XXX’);”改成 “this.$toast(“XXX”);”的使用方式，具体如下所示：

这样使用的原因官方解释是：引入 Toast 组件后，会自动在 Vue 的prototype上挂载$toast 方法，便于在组件内调用。也就是说，通过$toast 方法来直接在具体的调用组件操作。

以上就是本章全部内容，欢迎关注三掌柜的微信公众号“程序猿by三掌柜”，三掌柜的新浪微博“三掌柜666”，欢迎关注！