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

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

Use of Linux ipcs command

Detailed process of using Vscode combined with docker for development

Solution to the problem that mixin does not work in scss (browser cannot compile it)

Installing Win10 system on VMware workstation 14 pro

js to achieve the pop-up effect

Explanation of MySQL index types Normal, Unique and Full Text

JavaScript to implement login slider verification

How to upload and download files between Linux server and Windows system

vue+elementui implements the complete code of adding and modifying a shared bullet box

How to bypass unknown field names in MySQL

Recommend

Index Skip Scan in MySQL 8.0

CSS implementation code for drawing triangles (border method)

Ubuntu 16.04 kernel upgrade steps

Solution to inserting a form with a blank line above and below

The background color or image inside the div container grows as it grows

Research on the problem of flip navigation with tilted mouse

JavaScript implements random generation of verification code and verification

Pitfalls and solutions encountered in MySQL timestamp comparison query

VMware Workstation 12 Pro Linux installation tutorial

Detailed introduction to CSS priority knowledge

onfocus="this.blur()" is hated by blind webmasters

CSS3 implements the sample code of NES game console

Do you know why vue data is a function?

Three ways to communicate between Docker containers

Detailed explanation of how to use Docker to build a simple Java development and compilation environment