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

前言

前端开发的时候,在项目中引入组件以及使用是非常常见操作,但是有时候会遇到一些引入的方式不对或者其他原因造成的使用问题、引起报错等问题,尤其是对于刚入行不久的萌新来说更是要留意,本篇文章就来分享一下在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);

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

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

 

具体使用

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

Toast('提示内容');

会有报错,报错原因请看下一节内容。

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

 

报错提示

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

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

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

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

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

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

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

三掌柜的微信公众号:

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

三掌柜的新浪微博:

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

 

版权声明:玥玥 发表于 2021-06-14 22:22:08。
转载请注明:前端开发:Vue项目全局引入组件, 以及实际使用的方法 | 女黑客导航