Detailed explanation of mixins in Vue.js

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

Recommend

Docker installation tutorial in Linux environment

1. Installation environment Docker supports the f...

MySQL 8.0.12 winx64 decompression version installation graphic tutorial

Recorded the installation of mysql-8.0.12-winx64 ...

Vue implements a simple timer component

When doing a project, it is inevitable to encount...

How to solve the problem of automatic package update in Debian system

I don't know when it started, but every time ...

MySQL uses aggregate functions to query a single table

Aggregate functions Acts on a set of data and ret...

Detailed explanation of nmcli usage in CentOS8

Common nmcli commands based on RHEL8/CentOS8 # Vi...

Detailed discussion of the differences between loops in JavaScript

Table of contents Preface Enumerable properties I...

Solve the problem of MySQL Threads_running surge and slow query

Table of contents background Problem Description ...

Tutorial on installing Apache 2.4.41 on Windows 10

1. Apache 2.4.41 installation and configuration T...

Several ways to store images in MySQL database

Usually the pictures uploaded by users need to be...

CSS achieves the effect of two elements blending (sticky effect)

I remember that a few years ago, there was an int...

HTML table tag tutorial (19): row tag

The attributes of the <TR> tag are used to ...

React passes parameters in several ways

Table of contents Passing parameters between pare...

WeChat applet implements jigsaw puzzle game

This article shares the specific code for impleme...

How to use React to implement image recognition app

Let me show you the effect picture first. Persona...