How to use vue.mixin

How to use vue.mixin: 1. Multiple components can share data and methods. After being introduced into the component using mixin, the methods and properties in the mixin are also incorporated into the component, and can be directly Use; 2. Both hook functions will be called, and the hook in the mixin will be executed first.

[Related article recommendations: vue.js]

Usage of vue.mixin Method:

Vue provides a mixing mechanism - mixins, to achieve more efficient reuse of component content. At first I thought there was no difference between this and components. . Later I found out it was wrong. Let's take a look at the difference between mixins and imported components under normal circumstances.

After the component is referenced, it is equivalent to opening up a separate space in the parent component to perform corresponding operations based on the values ​​​​from the parent component props. In essence, the two are distinct and relatively independent.

And mixins, after introducing the component, merge the internal content of the component such as data and other methods, method and other attributes with the corresponding content of the parent component. It is equivalent to that after the introduction, various property methods of the parent component have been expanded.

Simple component reference:

Parent component sub-component>>> Parent component sub-component

Mixins:

Parent component Child component>>> new parent component

Function: Multiple components can share data and methods. After being introduced in the component using mixin, the methods in the mixin are the same as those in the mixin. The properties are then incorporated into the component and can be used directly. Both hook functions will be called, with the hook in the mixin executing first.

Let me introduce you to the usage of vue mixin. The specific introduction is as follows:

1. Define a js file (mixin.js)

export default {
 data() {
  return {
   name: 'mixin'
  }
 },
 created() {
  console.log('mixin...', this.name);
 },
 mounted() {},
 methods: {}
}

2. In the vue file Free learning recommendations for using mixin

import mixin from '@/mixin'; // 引入mixin文件
export default {
 mixins: [mixin]
}

:JavaScript(Video)

The above is the detailed content of How to use vue.mixin. For more information, please follow other related articles on the PHP Chinese website!