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

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

前言

本文以在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\text{方法，便于在组件内调用。也就是说，通过}$toast方法，便于在组件内调用。也就是说，通过toast 方法来直接在具体的调用组件操作。

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