Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "what is the role of Vue.use". In the operation of actual cases, many people will encounter such a dilemma. Then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

When using ElementUI components, we usually write:

Import ElementUI from 'element-ui'; Vue.use (ElementUI)

After writing this, we can directly use the following in our custom components:

I'm Suyan.

Through this article, we will analyze how it is realized.

Vue provides a plug-in mechanism to extend some attributes to Vue. In fact, this plug-in is "ridiculous" and does nothing. Take a look at the source code:

Vue internal only helped you to determine whether there is a repeat registration, and called the function you passed to it, in fact, I can also call, but spare a circle, maybe the framework design has its own consideration.

Officially, a plug-in can be a function or an object that contains an install function. Element-ui can bring in all the components at once, or one of them, and what it uses internally is the plug-in mechanism. Let's do it ourselves:

The directory structure is as follows:

SyElement/index.js:

Define a plug-in that registers components SyInfo and SyMessage globally through the global function component provided by Vue. Look at the code:

Import SyInfo from'. / SyInfo/index'; import SyMessage from'. / SyMessage/index'; import log from'. / log'; export default {install (Vue, options) {/ / globally registered component SyInfo Vue.component (SyInfo.name, SyInfo); / / globally registered component SyMessage Vue.component (SyMessage.name, SyMessage) / / add a global function to Vue that uses Vue.prototype.$loglog = log;}} in all components

Because you want to support the use of single components, each component is actually a plug-in.

Import SyMessage from'. / src/component.vue'; / / provides an install function SyMessage.install = function (Vue) {Vue.component (SyMessage.name, SyMessage);} export default SyMessage

Component.vue is the concrete implementation of a component:

Analyze the implementation of element-ui: export default {name: 'SyMessage'}

The implementation of SyMessage is the same as SyInfo. Now you can use it in the same way as Element-ui:

Import ElementUI from 'element-ui'; Vue.use (ElementUI)

One more thing: sometimes, some business requirements need to use a service in each component, such as data statistics. You can actually mount a function in the global Vue, so that it can be used in each component. For example, log mentioned in this article is a function mounted globally:

Vue.prototype.$loglog = log

You can use this in all components:

This is the end of this.$log ({uid: 'suyan'}); what is the function of Vue.use? thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.