Mixins with

Vue provides a hybrid mechanism, mixins, to achieve more efficient reuse of component content.

What it does: Multiple components can share data and methods. Once introduced into a component that uses a mixin, methods and properties in the mixin are incorporated into that component and can be used directly. The hook function is called both, and the hook in the mixin is executed first.

1.1 Local Use

mixins.js

Const a = {data() {return {name: "mixin"}; // Const a = {data() {return {name: "mixin"}; }, created() { console.log("mixin..." , this.name); }, mounted() {}, methods: {} }; export default a;Copy the code

demo1.vue

{{name}} //mixin // automatically merges imported data in the component, Specific rules refer to https://cn.vuejs.org/v2/guide/mixins.html -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the import from a '.. /mixin' mixins:[a]Copy the code

demo2.vue

{{name}} //mixin // automatically merges imported data in the component, Specific rules refer to https://cn.vuejs.org/v2/guide/mixins.html -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the import from a '.. /mixin' mixins:[a]Copy the code

2.2 Global Import

It is not recommended because it affects every instance object of Vue and VueComponent

mixins.js

Const a = {data() {return {name: "mixin"}; // Const a = {data() {return {name: "mixin"}; }, created() { console.log("mixin..." , this.name); }, mounted() {}, methods: {} }; export default a;Copy the code

main.js

import a from "./mixin"; Vue.mixin(a); // Global registrationCopy the code

Demo. vue can be used in any vue file without import

{{name}}
Copy the code

Feel free to like and comment if you find it helpful. The views expressed above are personal. Please correct any errors. If you are interested in the front, welcome to my personal blog sundestiny. Making. IO/myblog /