This is the 13th day of my participation in the More text Challenge. For details, see more text Challenge

preface

Front-end development, in the project into components and use is a very common operation, but sometimes encountered some introduction of the use of the wrong way or to other causes, cause an error, such as problems, especially for just shortly into the line of a new, more should pay attention to, this article is to share in the Vue program components, introduced the global, And how components are used in specific places.

Taking Vant components in the Vue projects under the Toast of the introduction of prompt box and used as an example, the Vant official documentation explain some not clear, here in the further explanation, convenient developers to use, you don’t know how knowledge is not complicated, but is not familiar with the man will still have a little trouble, please donate said, The details are as follows:

Introduce methods

Open the Vue project, and then according to the steps of the Vant official document, you can directly introduce the components. Here, the introduction of the Toast prompt box is introduced. The specific operations are as follows:

1, find the Vue project main.js file, click open to enter;

2. Introduce a Toast prompt in the main.js file as follows:

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

Vue.use(Toast);
Copy the code

With this action, the Toast prompt component has been properly introduced into the project, and the Toast prompt can be used globally.

The specific use

After the correct global introduction of the component, the concrete usage comes next. The Vant documentation describes how to introduce and use the Toast prompt. There is a small problem for developers who are not familiar with the introduction and use of the Toast prompt. That is to call the Toast(‘ prompt content ‘). There will be an error. See the next section for the reason.

An error prompt

When Vant is introduced in CDN, the error message is as follows:

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

Some people may ask why there is an error when using a Toast after a successful global introduction. It is because the posture is not correct. The wrong way to use Toast is to use it. There are problems with this approach. The right approach is to Toast. “This $toast (” XXX”);” As shown below:

The official reason for this is that the introduction of the Toast component automatically mounts the Toast method on Vue’s Prototype and makes it easy to call it from within the component. That is, through the TOAST method, which is easy to invoke within the component. That is, through the TOAST method, which is easy to invoke within the component. That is, the component operation is invoked directly in the concrete through the TOAST method.

That is all the content of this chapter. Welcome to pay attention to the wechat public number “Program ape by Three managers” and the Sina Weibo of three managers “Three managers 666”. Welcome to pay attention!