Detailed explanation of the steps to use mixin in Vue

This time I will bring you a detailed explanation of the steps for using mixin in Vue. What are the precautions when using mixin in Vue. Here are practical cases, let’s take a look.

Let me talk about my understanding of mixins in vue

Vue provides a mixing mechanism-mixins, which is used to reuse component content more efficiently. 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 references, 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 still distinct. 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 child component>>> Parent component child component

mixins:

Parent component child component> >> new parent component

Function: Multiple components can share data and methods. After being introduced in a component using mixin, the methods and properties in the mixin are also incorporated into the component, and can be directly use. Hook Function will be called both, and the hook in the mixin will be executed first.

The following is an introduction 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: {}
}

About usage, vue documentation There is a detailed introduction in , here we only introduce how to use mixin in a vue file.

2. Use mixin in vue files

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

What you need to pay attention to in Vue front-end development

How to get the DOM element position in JS

The above is the detailed content of Detailed explanation of the steps to use mixin in Vue. For more information, please follow other related articles on the PHP Chinese website!