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

A brief discussion on when MySQL uses internal temporary tables

union execution For ease of analysis, use the fol...

The process of installing MySQL 8.0.26 on CentOS7

1. First, download the corresponding database fro...

How to use wangEditor in vue and how to get focus by echoing data

Rich text editors are often used when doing backg...

About debugging CSS cross-browser style bugs

The first thing to do is to pick a good browser. ...

MySQL pessimistic locking and optimistic locking implementation

Table of contents Preface Actual Combat 1. No loc...

Detailed tutorial on installing JDK1.8 on Linux

1. Cleaning before installation rpm -qa | grep jd...

HTML text box (text) is not available in multiple ways to achieve read-only

Method 1: <input id= "File1" type= &q...

JS Difficulties Synchronous and Asynchronous and Scope and Closure and Detailed Explanation of Prototype and Prototype Chain

Table of contents JS Three Mountains Synchronous ...

Implementation of Nginx domain name forwarding

Introduction to Nginx Nginx ("engine x"...

How to hide rar files in pictures

You can save this logo locally as a .rar file and...

javascript realizes 10-second countdown for payment

This article shares the specific code of javascri...

Example code for realizing charging effect of B station with css+svg

difficulty Two mask creation of svg graphics Firs...

CSS float property diagram float property details

Using the CSS float property correctly can become...

Detailed explanation of Linux environment variable configuration strategy

When customizing the installation of software, yo...

CocosCreator Skeleton Animation Dragon Bones

CocosCreator version 2.3.4 Dragon bone animation ...