How Vue is used to use mixed Mixins and plugins

Official Website: Mixins is a very flexible way of distributing multiple functions in VUE components. A mixed object can contain any component options. When using a mixed object with a component, all mixed objects will be mixed into the options of the component itself.
Personal: Mixing is used to extract all options such as data objects, hook functions, methods, etc., including data objects, hook functions, methods, etc., to achieve the reuse of the code, the mix is ​​quite big, then we come Look at the actual usage.

// This is used in the main.js root file, and it is also the same in the group. From ‘Vue’; var mer mixin = {data () {return {name: ‘www.vipbic.com’, author: ‘Yang Mr.’}}, created: function () {Console.log (‘Website:’ + THIS .name)}}: {foo: function () {Console.log (‘Author:’ + this.author)}, conflicting: function () {console.log (‘from mixin’)}}} new Vue {Mixins: [Mixin], Render: h => h (app), created () {let option = this. $ Options.donotinit Console.log (‘Option:’,); this.foo ()}}). $ mount (‘# app’) // Use in the formation
   VAR Mixin = {data () {return {name: 'www.vipbic.com', author: 'Yang Mr.'}}, created: function () {Console.log 'Website:' + this.name)}}}: {Console.log ('Author:' + this.author)}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} EXPORT Default {Mixins: [Mixin], Created () {this .foo ()}} 
The effect is as follows, it can be seen that the Created in the mixed Mixins component is higher than
components. Created

Global registration Main.js directly registered

Vue如何使用混合Mixins和插件开发详解

Import Vue from ‘Vue’; var mixin = {data () {return {name: ‘www.vipbic.com’, author: ‘Sheep’}}, created: function () {Console .log (‘Website:’ + this.name)}}}}}}}}}}}}}}}}}}}}}}: function () {Console.log (‘Author:’ + THIS.AUTHOR)}}} Vue.Mixin (Mixin) New Vue ({render: h => h (app)}). $ Mount (‘# app’)

Effect As described below, we don’t call it first, see if there is a print result, you can find that we have not been called, you can print twice, according to everyone’s regular consideration, it may be performed once, that is, initialization once, but execute Two
 How to solve the implementation twice   
I saw this online, saying that it is from I saw it on the official website, but I didn’t see it on the official website, but I can solve the problem

VAR mixin = {data () {return {name: ‘www .vipbic.com ‘, Author:’} ‘}}, created: function ()} }.donotinit; console.log (option) // First execution TRUE second for undefined IF (! Option) {// You can place some of your logic, such as the method to call console.log (‘Website:’ + this.name)}}, methods: {foo: function () {console.log (‘Author:’ + this.author)},}} Vue.mixin (Mixin); New Vue ({DONOTINIT: TRUE, // Add a status Render: h =>H (app),}). $ mount (‘# App’) Vue如何使用混合Mixins和插件开发详解

The effect is as follows

How to call
  Just explained how to solve two problems in calling  

// main.jsimport vue from ‘Vue’; var Mixin = {Data () {return {name: ‘www.vipbic.com’, Author: ‘Yang Mr.’}}, created: function ()}}, created: function () {let option = this. $ Options.donotinit; if (! Option) { Console.log (‘Website:’ + this.name)}}}}}}}}}}: function () {Console.log (‘Author:’ + this.author)}}} Vue.Mixin (Mixin); New Vue ({DONOTINIT: TRUE, RENDER: H => h (app),}). $ Mount (‘# app’) // Tune

export default {created () {this.foo ()} in the component.

Vue如何使用混合Mixins和插件开发详解

Modular registration

Newly built separate
Mixin.js file
   Import vue from 'Vue'; var mixin = {data () {return {name: 'www.vipbic.com', author: 'Yang Mr.'}}, created: function ()}}, created: function () {let option = this. $ Options. Donotinit; if (! option) {Console.log ('Website:' + this.name)}}}, methods: {foo: function () {Console.log ('Author:' + this.author)}, conflicting: Function () {Console.log ('from mixin')}}}}}} {vue.mixin (mixin)}}  

Vue如何使用混合Mixins和插件开发详解

// Register Vue.use (MyMixin) in main.js; New Vue ({DONOTINIT: TRUE, RENDER: H => h (app),}). $ Mount (‘# app ”

// Tune

export default {created () {this.foo ()},}

The effect is the same as the main.js registration
   
The above mentioned USE, also explaining the use of use-related knowledge, and often see if
is developed in development Vue.use (Vuerouter) , Vue.js Need to note that there is an open method Install during the plugin development process. The first parameter of this method is the VUE constructor, and the second parameter is an optional option object,
 plugin usually adds a global function to Vue. There are no limits in the range of plugins - generally have few:   1, add global methods or properties, such as: Vue-element] 
2, add global resources: instruction / filter / transition, etc. Such as Vue-Touch 3, add some component options, such as: Vuex
4, add the Vue instance method, and add them to the Vue.Prototype.
5, a library provides its own API, and provides one or more features mentioned above, such as Vue-Router
    let myplugin = {} myplugin .install = function (Vue, Options) {// 1. Add global method or attribute Vue.Prototype. $ mymethod = function (options) {// logic ...} // 2. Add global resource instruction Vue.directive 'My-Directive', {Bind (EL, BINDING, VNODE, OLDVNODE) ​​{// Logic ...} // 3. Injecting components, also mentioned above, VUE is very flexible to see how you go Excavate it Vue.Mixin ({created: function () {// logic...}})}  
Add global method or attribute

Vue如何使用混合Mixins和插件开发详解

Import Vue From ‘vue’; // According to the install function, the first instance of the Vue is incoming Vue, the second parameter is an optional option object, that is, the parameters can be passed with myplugin.install = function (vue, options) {Console .log (options) // print parameter Vue.Prototype.Myname = options.name vue.prototype.myauthor = function () {return Options.author}} vue.use (MyPlugin, {name: ‘www.vipbic.com’ // Transfer parameter author: ‘Yang Mr.’}; new Vue ({render: h => h (app),}). $ Mount (‘# app’)






 (this.myauthor ()) Console.log (this.myauthor ()) },}   
The effect is as follows

Add global resource

 // Adding instructions via Vue instructions can be added globally and also added to components to add import vUE from 'vue'; let myplugin = {} myplugin.install = function (vue, options) {vue.directive ("Hello", {Bind: Function (EL, Bingind, vNode) {Console.log (Options) EL. Style ["color"] = bingind.value; console.log ("1-bind");}, inserted: function () {console.log ("2-insert");}, update: function () {Console .log ("3-update");}, componentupdated: function () {console.log ('4 - componentupdated');}, unbind: function () {console.log ('5 - unbind');}} )} // Transfer parameter vue.use (MyPlugin, {name: 'www.vipbic.com', author: 'Yang Mr.'}); New Vue ({Render: h => h (app),}). Mount ('# App')   

    {{message}  
Click to start plus 1
Solution


Export Default {data () {return {Message: 10, Color3: “Red”}}, methods: {add () {this.Message ++;} jiebang () {this. $ Destroy (); // Solution}},} Vue如何使用混合Mixins和插件开发详解

 Analysis results, before analyzing the results, let's take a look at the API of  Vue.directive , the explanation from the official website 
EL: The elements bound by the instruction can be used directly Operation DOM
Binding: An object, contains the following attribute

NAME: Instruction name, does not include a V-prefix
 value: The binding value of the instruction, for example: the above example The value is RED   OldValue: The previous value binded by the instruction, only available in the Update and ComponentUpdated hooks. Regardless of whether or not the value is changed 
Expression: String Forms of instruction expressions arg: Parameters pass to the instruction, optional.
Custom instructions There are 5 life cycles (also called hook functions), respectively: Bind, INSERTED, UPDATE, COMPONENTUPDATE, UNBIND // The bind in the example is only called once, the command is first tied.When the element is set to the element, use this hook to define a binding initialization action.
INSERTED: When the bound element is inserted into the parent node (the parent node can be called, there is no need to save)
Update: The binding is called when the element is being updated. And regardless of whether the binding value changes, by comparing the bound value before and after the update, ignore unnecessary template updates

ComponentUpdate: When the bound element is located, the template is located when the update update period is called

unbind: Only calls one time, the place where the image yellow box is called when the monthly element is interpreted, and the data initialized after the component is used in the Vue如何使用混合Mixins和插件开发详解 V-Hello

instruction, and the acceptance is also printed. Parameters, after clicking the megad of megadownload, 1 is invalid

Injecting component


  • let myplugin = {} myplugin .install = function (vue, options) {vue.mixin ({data () {return {name: options.name}}}: {getuser ()} vue.use (MyPLUGIN) , {name: ‘www.vipbic.com’, author: ‘Yang Mr.’} New Vue ({render: h => h (app),}). $ mount (‘# app’)


Export DEFAULT ​​{data () {return {}}, created () {// Here Name and Getuser come from global injection console.log (this.name) Console.log (this.getuser ())}}



Vue.USE will automatically block the same plug-in multiple times, only the plugin will only register once when it is registered

Reference article

Web front-end development – mixing

Vue.directive directive The above is all of this article, I hope to learn from everyone Help, I hope everyone will support Tumi Clouds.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment