Vue detailed explanation of mixins usage

Preface

As our project grows, we will find that there may be many similar functions between components. You copy and paste the same code snippets (data, method, watch, mounted, etc.) over and over again. If we repeat the definition of these properties and methods in each component, it will cause code redundancy in the project and increase the difficulty of maintenance. For this situation, the official Mixins feature is provided.

1. What are Mixins?

Mixins, the official description is a very flexible way to distribute reusable functions in Vue components. Mixins is a js object that can contain any functional options in the script items in our components, such as data, components, methods, created, computed, etc. We just need to pass the common functions into the mixins option as an object. When the component uses the mixins object, all the options of the mixins object will be mixed into the options of the component itself. This will improve the reusability of the code and keep your code clean and easy to maintain.

2. When to use Mixins?

When we have similar data or functions in multiple components, we can use mixins to extract the common parts. Through the functions encapsulated by mixins, components calling them will not change the external scope of the function.

3. How to create Mixins?

Create a mixins folder in the src directory and create a myMixins.js file in the folder. As we said before, mixins is a js object, so myMixins should be defined in the form of an object. In the object, we can define our data, components, methods, created, computed and other properties just like vue components, and export the object through export

4. How to use Mixins?

Import the myMixins.js file into the component you need to call, and then import the objects you need into export default.

5. Characteristics of Mixins

[5.1] Methods and parameters are not shared among components. Although a component calls mixins and merges its properties into its own component, its properties are only recognized by the current component and are not shared. In other words, other components cannot obtain the data and methods in mixins from the current component.

①First, we define an age field and a getAge method in the mixed object myMixins.js

export const myMixins = {
components:{},
data() {
return {
age: 18,
}
},
mounted() {
this.getAge()
},
methods: {
getAge() {
console.log(this.age)
}
}
}

② In component 1, perform +1 operation on num

import { myMixins } from "@/mixins/myMixins.js";
export default {
mixins: [myMixins],
data() {
return {}
},
created() {
this.age++
},
}

③Component 2 does not operate

export default {
mixins: [myMixins],
data() {
return {}
},
}

④We switch to two pages respectively to view the console output. You will find that component 1 changes the value in age, and the age value in component 2 is still the initial value of the mixed object, and has not changed with the addition of component 1.

[5.2] After introducing mixins, the components will merge them and extend the data and methods in mixins to the current component. Conflicts may occur during the merging process. Next, we will learn more about Mixins merge conflicts.

6. Mixins merge conflicts

[6.1] Options whose values ​​are objects (components, methods, computed, data) will be merged when mixed into components. When keys conflict, the component will take precedence, and the keys in the component will override the keys in the mixed object.

① We add the age attribute, getAge1 method and getAge2 method to the mixed object

// myMixins.js
export const myMixins = {
components:{},
data() {
return {
age: 18,
}
},
methods: {
getAge1() {
console.log("age1 from mixins =", this.age )
},
getAge2() {
console.log("age2 from mixins =", this.age )
},
}
}

②In the component that introduced the myMixins file, we added the age attribute, getAge1 method, and getAge3 method

// template.vue
import { myMixins } from "@/mixins/myMixins.js";
export default {
mixins: [myMixins],
data() {
return {
age: 20,
}
},
mounted() {
this.getAge1();
this.getAge2();
this.getAge3();
},
methods: {
getAge1() {
console.log('age1 from template =', this.age)
},
getAge3() {
console.log('age3 from template =', this.age)
},
}
}

③ We will find that the age in the component overrides the age of the mixed object, and the getAge1 method of the component overrides the getAge1 method of the mixed object

[6.2] Options whose values ​​are functions (created, mounted) will be merged and called when mixed into components. The hook functions in the mixed object will be called before the hook functions in the component.

7. Differences from vuex

vuex: used for state management. The variables defined in it can be used and modified in each component. After the value of this variable is modified in any component, the value of this variable in other components will also be modified accordingly.

Mixins: You can define shared variables and use them in each component. After being introduced into a component, each variable is independent of each other, and value changes will not affect each other in the component.

8. Differences from public components

Component: Introducing a component in a parent component is equivalent to giving an independent space in the parent component for the child component to use, and then passing values ​​according to props, but in essence the two are relatively independent.

Mixins: After the component is introduced, it is merged with the objects and methods in the component, which is equivalent to extending the objects and methods of the parent component. It can be understood as forming a new component.

This is the end of this article about Vue's detailed explanation of mixins usage. For more relevant Vue mixins content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!