Using mixins within Vue

This time I will introduce to you the use of mixin in Vue. What are the precautions for using mixin in Vue? The following is a practical case, 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 is referenced, 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 distinct and 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. Both hook functions will be called, with the hook in the mixin executing 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:

vue router dynamic routing operation sub-routing

Use Vue to dynamically set routing parameters

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