Detailed explanation of the use of Vue mixin

Use of Vue mixin

Data access in mixin

mixin/index.js
Home.vue
About2.vue

Methods and computed usage in mixin

mixin/index.js
Home.vue
About2.vue

Summarize

Use of Vue mixin

Function : After the component is introduced, the content inside the component, such as data and other methods, method and other attributes, are merged with the corresponding content of the parent component. This is equivalent to expanding the various property methods of the parent component after the introduction.
The equal access principle of data data : if the current component using mixin has the data data or methods method, the data or method of the current component is directly used, otherwise the data and methods inside the mixin are directly inherited
Note : You can define shared variables and use them in each component. After being introduced into the component, each variable is independent of each other, and value changes will not affect each other in the component.
Note 2 : Mixin is merged with the objects and methods in the component after the component is introduced, which is equivalent to extending the data and methods of the parent component, etc., which can be understood as forming a new component

Data access in mixin

mixin/index.js

export default {
  data () {
    return {
      msg: "I am msg in mixin"
    }
  },
  created () {
  },
  mounted () { },
  methods: {
  }
}

Home.vue

Using mixins in Home component

<template>
  <div>
    <div>home -- {{ msg }}</div> /* msg modified by home */
  </div>
</template>
<script>
import mixin from "@/mixin/index.js";
export default {
  name: "Home",
  mixins: [mixin],
  data() {
    return { };
  },
  created() {
    // Get the data of mixin console.log("home print", this.msg); //home prints I am the msg in mixin
    // Modify the data of mixin this.msg = "msg modified by home";
    console.log("home print", this.msg); // home prints the msg modified by home
  },
  methods: {
  },
};
</script>
<style lang="scss" scoped>
</style>

About2.vue

<template>
  <div>
    <div>about2 -- {{ msg }}</div> /* msg modified by about2 */
  </div>
</template>
<script>
import mixin from "@/mixin/index.js";
export default {
  name: "About2",
  mixins: [mixin],
  components: {},
  data() {
    return {
      msg: "local msg",
    };
  },
  created() {
    console.log("print about2", this.msg); // local msg
    this.msg = "msg modified by about2";
    console.log("print about2", this.msg); // msg modified by about2
    // The last page shows the modified msg data of about2},
  methods: {
  },
};
</script>
<style lang="scss" scoped>
</style>

Methods and computed usage in mixin

mixin/index.js

export default {
  data () {
    return {
      msg: "I am msg in mixin"
    }
  },
  created () { },
  mounted () { },
  computed: {
    UserName() {
      return "I am the calculated attribute UserName";
    },
  },
  methods: {
    tipMsg() {
      console.log("tipMsg method in minxin", this.msg);
    },
    tipInfo (info) {
      console.log("tipInfo method in minxin", info);
    }
  }
}

Home.vue

<template>
  <div>
    <div>home --- msg-{{ msg }} UserName-{{ UserName }}</div>
    /* home --- msg UserName-I am the UserName of the calculated attribute */
  </div>
</template>
<script>
import mixin from "@/mixin/index.js";
export default {
  name: "Home",
  mixins: [mixin],
  components: {},
  data() {
    return {};
  },
  created() {
    // Get the data of mixin console.log("home print", this.msg); //home prints I am the msg in mixin
    // Modify the data of mixin this.msg = "msg modified by home";
    console.log("home print", this.msg); // home prints the msg modified by home
    //Call the tipMsg method in mixin this.tipMsg(); //The msg modified by the tipMsg method home in minxin
    this.tipInfo("I am a home rookie info"); // tipInfo method in minxin I am a home rookie info
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
</style>

About2.vue

<template>
  <div>
    <div>about2 -- {{ msg }} UserName-{{ UserName }}</div>
    /* about2 -- about2 modified msg UserName-I am the calculated attribute UserName */
  </div>
</template>
<script>
import mixin from "@/mixin/index.js";
export default {
  name: "About2",
  mixins: [mixin],
  components: {},
  data() {
    return {
      msg: "local msg",
    };
  },
  created() {
    console.log("print about2", this.msg); // local msg
    this.msg = "msg modified by about2";
    console.log("print about2", this.msg); // msg modified by about2
    // The last page shows the modified msg of about2 this data this.tipMsg(); // The last print-> I am the local tipMsg method of about2 this.tipInfo(); // The tipInfo method in minxin is undefined
  },
  methods: {
    tipMsg() {
      console.log("I am the local tipMsg method of about2");
    },
  },
};
</script>

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:

Example of communication between parent and child components of Vue (props, $ref, $emit)
How to use mixins in Vue
How to use Vue3 mixin
Detailed tutorial on using Mixin & extends in Vue
Detailed explanation of the failure of using ref responsiveness in defineProps in vue3
Vue component common method extraction mixin implementation
Notes on Vue parent-child components sharing mixins
Detailed explanation of Vue componentization (ref, props, mixin, plug-in)
ref, props, mixin attributes in Vue

<<: Example of using #include file in html

>>: Explanation of nginx load balancing and reverse proxy