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

This article focuses on "how to write Vue plug-ins", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to write Vue plug-ins.

What is a plug-in

In the Vue framework, if we need to add some functionality to Vue, Vue has left me a way of plug-ins, we can write our own plug-ins, then register the plug-ins in Vue, and then use it.

Through the Vue plug-in, we can achieve some functions that the Vue framework does not have, and we can also use plug-ins written by others to help us achieve some functions more quickly.

The functional scope of the plug-in is not strictly required, and according to the official example, there are generally the following:

1. Add global methods or properties, such as vue-custom-element, we can add some global components as plug-ins, and then we can use it in any page or component. This is also how Element UI or Ant Design component libraries install components.

two。 Add global resources: directives / transitions, etc. Such as: vue-touch, we can also use plug-ins to add some global custom instructions to achieve our functions.

3. Add some component options through the global mixin. (e.g. vue-router)

4. Add global instance methods by adding them to the config.globalProperties. For example, it is common that we might put a $http request on a global instance method to make it easier for us to use in any page or component, without the need to explicitly introduce it into import.

5. A library that provides its own API and one or more of the functions mentioned above. Such as vue-router, vuex and so on.

Write plug-ins

Writing a Vue plug-in is actually very simple. A plug-in is actually an object or a function. If it is an object, it will call the install method in the object, and if it is a function, it will call this function. Regardless of the way the object's install method is called or the function is called, they receive two parameters: 1 is the app object generated by Vue's createApp, and 2 is the parameter passed in by the user.

Let's start with the simplest i18n function.

We usually put plug-ins in the plugins folder, which is easy to maintain and manage.

Let's create an i18n.js file

Export default {install: (app, options) = > {/ / write plug-in code}}

For example, if we need a global function to translate the entire program, we can expose the method by hanging it on the app.config.globalProperties property.

Function receives a key string, which we will use to find the converted string in the parameter object provided by the user.

/ / plugins/i18n.jsexport default {install: (app, options) = > {app.config.globalProperties.$translate = key = > {return key.split ('.'). Reduce ((o, I) = > {if (o) return o [I]}, options)}

Suppose that when a user uses a plug-in, an object containing the translated key will be passed in the options parameter. Our $translate function will use a string such as greetings.hello, so the value found will be Bonjour!.

For example:

Greetings: {hello: 'bondholders'}

We can also use inject to provide functionality or properties, for example, we can allow applications to access options parameters to be able to use the parameter objects passed in when the plug-in is installed.

/ / plugins/i18n.jsexport default {install: (app, options) = > {app.config.globalProperties.$translate = key = > {return key.split ('.'). Reduce ((o, I) = > {if (o) return o [I]}, options)} app.provide ('i18n, options)}}

Now we can use inject [i18n] injection into some pages or components to access the object.

Because Vue gives me the app object as the first parameter of the plug-in, the plug-in can use all other features, such as using mixin and directive. To learn more about createApp and application instances, check the Application API documentation.

For example, we have registered a new custom directive and a global mixin method in the plug-in:

/ / plugins/i18n.jsexport default {install: (app, options) = > {app.config.globalProperties.$translate = (key) = > {return key.split ('.') .reduce ((o, I) = > {if (o) return o [I]}, options)} app.provide ('i18n, options) app.directive (' my-directive', {mounted (el, binding, vnode) OldVnode) {/ / some logic...} / /...}) app.mixin ({created () {/ / some logic...} / /...})} use plug-ins

After we have written the plug-in above, we can use the plug-in. Using plug-ins in Vue is also very easy, and we can add plug-ins to our application by using the use () method.

The use () method takes two parameters. The first is the plug-in to install.

The second parameter is optional, and we can pass some custom parameters to the plug-in.

/ / main.jsimport {createApp} from 'vue'import Root from'. / App.vue'import i18nPlugin from'. / plugins/i18n'const app = createApp (Root) const i18nStrings = {greetings: {hi: 'alloying'}} app.use (i18nPlugin, i18nStrings) app.mount ('# app')

Finally, we use this plug-in in the page:

{{$translate ("greetings.hi")}} i18n plug-in example

The final display is:

At this point, I believe you have a deeper understanding of "how to write Vue plug-ins", might as well come to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.