Detailed explanation of Vue mixin usage and option merging

1. Use in components
2. Option merging
Summarize

1. Use in components

Mixins provide a very flexible way to distribute reusable functionality among Vue components. A mixin object can contain arbitrary component options. When a component uses a mixin, all of the mixin's options will be "mixed" into the component's own options.

<template>
  <div class="event_style">
    <h2>Basics</h2>
    <div class="inner_children">
      <span>{{ message }}</span>
    </div>
  </div>
</template>
<script>
var myMixin = {
  data() {
    return {
      message: "",
    };
  },
  created: function () {
    console.log("created:add mixin");
    this.message = "created:add mixin";
    this.hello();
  },
  methods: {
    hello: function () {
      console.log("hello from mixin!");
    },
  },
};
// Define a component that uses a mixin object export default {
  name: "mixin-basic",
  mixins: [myMixin],
};
</script>

2. Option merging

When a component and a mixin have options with the same name, those options will be "merged" in an appropriate manner.

For example, data objects are internally merged recursively, with component data taking precedence when conflicts occur.

<template>
  <div class="event_style">
    <h2>Options Merge</h2>
    <div class="inner_children">
      <span>{{ message }}</span>
      <span>{{ message1 }}</span>
    </div>
  </div>
</template>
<script>
var myMixin = {
  data() {
    return {
      message: "mixin:mixin",
      message1: "mixin:mixin-1",
    };
  },
  created: function () {
    this.hello();
  },
  methods: {
    hello: function () {
      console.log("mixin:hello from mixin!");
    },
  },
};
// Define a component that uses a mixin object export default {
  name: "mixin-merge",
  mixins: [myMixin],
  data() {
    return {
      message: "Component: hello",
    };
  },
  created: function () {
    this.hello();
  },
  methods: {
    hello: function () {
      console.log("Component: hello world!");
    },
  },
};
</script>
<style scoped>
.event_style {
  padding-left: 50px;
  padding-right: 50px;
}
.inner_children {
  display: flex;
  flex-direction: column;
  height: 150px;
  border: 1px solid #333;
  padding: 6px;
}
.inner_children span {
  font-size: 20px;
}
</style>

Page rendering effect

As can be seen from the figure above, when the mixed-in data and methods conflict with the component definition, the component takes precedence. When they are not defined in the component, they are merged to show the effect of the mixed-in definition.