前言
前端開發的時候，在專案中引入組件以及使用是非常常見操作，但是有時候會遇到一些引入的方式不對或者其他原因造成的使用問題、引起報錯等問題，尤其是對于剛入行不久的萌新來說更是要留意，本篇文章就來分享一下在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”，歡迎關注！
三掌柜的微信公眾號：
三掌柜的新浪微博：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/287320.html
標籤：其他
上一篇：i.MX RT開發筆記-01 | 初識 i.MX RT1062 跨界MCU
下一篇：零基礎系統化學習白帽黑客技術