vue mixin and creating gloabl and local custom Vue options
There sure is a lot to cover to get up and running with vuejs to get into a space where a developer can start making some interesting and useful projects. In this post I will be writing about what a vue mixin is, which is one of many little things that one should have a solid grasp on before diving into making or using vuejs plug-ins and client systems with vuejs as the front end framework of choice.
1 - Vue mixin basics
So a vue mixin is a way to go about defining custom Vue constructor options like that of the vue data, and vue el options. It is possible to define one or more mixins for a single Vue constructor instance via the mixins option, and the same can be done globally as well via the Vue mixin global method also.
1.1 - Vue mixin option for adding custom options just for a single Vue constructor instance
To add a mixin to a single vue constructor the vue mixin option should be used. When doing so the options that the mixin add will of course only work for that vue instance.
In this basic vue mixin example I just have two span elements in an html document that will both display a mess data object property when a vue instance is set up for it.
|
|
In the external basic_mixin_option.js file I have two Vue constructor instances. One has a mixin that allows for a startMess option to be defined for the instance, and the other does not event though they both have a startMess option.
|
|
In this example as expected the Vue instance that has the mixin that defines the logic for the startMess option works, and displays the startMess option value as the value of the mess data object property.
1.2 - Adding a global Vue mixin for all Vue constructor instances.
Here I have an example that does more or less the same thing as the first basic example that just defines a simple local mixin with the mixin option. However when using the Vue mixin global api method this results in the mixin being available in all additional Vue constructor instances from then on.
|
|
|
|