How to use mixins in Vue

This time I will show you how to use mixin in Vue, and what are the precautions when using mixin in Vue. The following is a practical case, let's take a look.

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 are the specifications for Vue front-end development

How to use JS to obtain the absolute position of DOM elements

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