Detailed explanation of mixins in Vue.js

Mixins provide distributed reusable functionality for components in a flexible way. Mixin objects can contain arbitrary component options. When a component uses a mixin, all of the options in the mixin will be "mixed into" the component's own options.

1. Basic usage of Mixins

Now there is a program that increments numbers by clicking. Assuming it has been completed, we hope that every time the data changes, a prompt "data has changed" can be printed in the console.

Code implementation process:

<div id="app">
    <p>num:{{ num }}</p>
    <P><button @click="add">Add quantity</button></P>
</div>


<script>
    var addLog = {
    	// Mix the updated hook into the vue instance updated() {
            console.log("The data changes to " + this.num + ".");
        }
    }

    var app = new Vue({
        el: '#app',
        data: {
            num: 1
        },
        methods: {
            add: function () {
                this.num++;
            }
        },
        mixins: [addLog], //mixin})
</script>

Write the picture description here

When the button is clicked, the updated method in the mixed addLog is triggered.

2. The calling order of mixins

In terms of execution order, the混入的先執行，然后構造器里的再執行
The attributes in data and the methods in methods will be overwritten (構造器覆蓋混入的屬性和方法)
The lifecycle hooks will be called twice and will not be overwritten (先調用混入鉤子再調用構造器鉤子)

We also added the updated hook function to the constructor of the code above:

<div id="app">
    <p>num:{{ num }}</p>
    <P><button @click="add">Add quantity</button></P>
</div>


<script>
    var addLog = {
        updated : function () {
            console.log("The data changes to " + this.num + ".");
        }
    }

    var app = new Vue({
        el: '#app',
        data: {
            num: 1
        },
        methods: {
            add: function () {
                this.num++;
            }
        },
        updated: function () {
            console.log("updated method in the constructor.")
        },
        mixins: [addLog], //mixin})
</script>

Write the picture description here

3. Global Mixin Method

Global mixins are executed before mixins and constructor methods.

<div id="app">
    <p>num:{{ num }}</p>
    <P><button @click="add">Add quantity</button></P>
</div>


<script>
    Vue.mixin({
        updated: function () {
            console.log('I am mixed in globally');
        }
    })

    var addLog = {
        updated : function () {
            console.log("The data changes to " + this.num + ".");
        }
    }

    var app = new Vue({
        el: '#app',
        data: {
            num: 1
        },
        methods: {
            add: function () {
                this.num++;
            }
        },
        updated: function () {
            console.log("updated method in the constructor.")
        },
        mixins: [addLog], //mixin})
</script>

Write the picture description here

Sequential summary:全局混入> 局部混入> 構造器

When two object key names conflict, take the key-value pair of the component object

When there are test methods (with the same name) in both the mixin and the component object, the final value is the key-value pair of the component object.

  <div id="app">
      <p>num:{{ num }}</p>
      <P>
          <button @click="add">Add quantity</button>
      </P>
  </div>

  <script>
      var addLog = {
          updated: function () {
              console.log("The data changes to " + this.num + ".");
              this.test();
          },
          methods: {
              test: function () {
                  console.log('test in mixin')
              }
          }
      }

      var app = new Vue({
          el: '#app',
          data: {
              num: 1
          },
          methods: {
              add: function () {
                  this.num++;
              },
              test:function(){
                  console.log('test in component object')
              }
          },
          mixins: [addLog], //mixin})
</script>

Write the picture description here

This is the end of this article about Vue.js mixins. For more information about Vue.js mixins, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

A Deep Dive into Vue.js Mixins
Detailed explanation of Vue.js Mixins
How to use Mixins in Vue.js

<<: Detailed explanation of the implementation process and usage of the Linux Recycle Bin mechanism

>>: Summary of MySQL common functions

Teach you how to use Portainer to manage multiple Docker container environments

Detailed explanation of mixins in Vue.js

1. Basic usage of Mixins

2. The calling order of mixins

3. Global Mixin Method

When two object key names conflict, take the key-value pair of the component object

Teach you how to use Portainer to manage multiple Docker container environments

Detailed explanation of JavaScript's built-in objects Math and strings

Front-end advanced teaching you to use javascript storage function

The popularity of Chinese domain names in China has ushered in a new round of climax

Tomcat breaks the parent delegation mechanism to achieve isolation of Web applications

Detailed tutorial on installing mysql-8.0.20 under Linux

7 Ways to Write a Vue v-for Loop

How to implement Mysql switching data storage directory

Specific use of GNU Parallel

Detailed installation and configuration tutorial of MySQL flashback tool binlog2sql

Recommend

Detailed examples of float usage in HTML/CSS

Summary of Linux file directory management commands

A brief discussion on the placement of script in HTML

Get the calculated style in the CSS element (after cascading/final style)

CentOS 7 installation and configuration tutorial under VMware10

React event mechanism source code analysis

How to set the position of the block element in the middle of the window

Detailed explanation of several ways of communication between Linux user state and kernel state

How to completely delete the MySQL service (clean the registry)

Win32 MySQL 5.7.27 installation and configuration method graphic tutorial

Analyze how a SQL query statement is executed in MySQL

Implementation of Mysql User Rights Management

JS uses the reduce() method to process tree structure data

Tutorial on installing nginx in Linux environment

Pure CSS3 to achieve pet chicken example code