Vue.js mixed in
mixins define a subset of reusable methods or computational properties. Mixed objects can contain any component options. When a component uses a blended object, all options that blend into the object are mixed into the options of the component itself.
Look at a simple example:
When components and blended objects have the same name option, these options are mixed in the appropriate way.
For example, a data object is internally shallowly merged (a layer of attribute depth), with component data taking precedence when it conflicts with the component's data.
In the following example, a Vue instance contains the same methods as a mixed object. It can be seen from the output that the two options are merged.
The output is:
Incoming calls Component Call
If the methods option has the same function name, the Vue instance will have a higher priority. In the following example, the Vue instance and the methods option of the mixed object contain the same function:
The output is:
HelloWorld method start start Main: same method name
The above example, we call the following three methods:
vm.hellworld Span>(); Vm.start(); Vm.samemethod();
If the same function name is encountered from the output methods option, the Vue instance has a higher priority to execute the output.
You can also register mixed objects globally. Pay attention to use! Once the global blended object is used, it will affect all Vue instances created afterwards. When appropriate, you can inject processing logic into your custom objects.
Use global blending objects with caution, as it affects each separately created Vue instance (including third-party templates).