Detailed explanation of Vue mixin

Detailed explanation of Vue mixin

insert image description here

Local Mixin

<template>
  <div>
    <h2 @click="showName">Student name: {{name}}</h2>
    <h2>Student gender: {{sex}}</h2>
  </div>
</template>

<script>
  //Introduce a mixed import {
    hunhe,hunhe2
  } from '../mixin'
  export default {
    name: 'Student',
    data() {
      return {
        name: 'Zhang San',
        sex: 'male'
      }
    },
    mixins: [hunhe,hunhe2]
  }

</script>

export const hunhe = {
    methods: {
        showName() {
            alert(this.name)
        }
    }
}

export const hunhe2 = {
    data() {
        return {
            x: 100,
            y: 200
        }
    }

}

Global Mixins

import { hunhe, hunhe2 } from './mixin'
Vue.mixin(hunhe)
Vue.mixin(hunhe2)

insert image description here

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:
  • A brief discussion on how Vue3 Composition API replaces Vue Mixins
  • How to use mixins in Vue
  • Detailed explanation of Vue mixin usage and option merging
  • Web project development VUE mixing and inheritance principle
  • Vue detailed explanation of mixins usage
  • How to use Vue3 mixin

<<:  CSS3 uses scale() and rotate() to achieve zooming and rotation

>>:  Blog Design Web Design Debut

Recommend

MySQL table name case selection

Table of contents 1. Parameters that determine ca...

How to install MySql in CentOS 8 and allow remote connections

Download and install. First check whether there i...

How to periodically clean up images that are None through Jenkins

Preface In the process of continuous code deliver...

W3C Tutorial (9): W3C XPath Activities

XPath is a language for selecting parts of XML do...

W3C Tutorial (7): W3C XSL Activities

A style sheet describes how a document should be ...

In-depth understanding of uid and gid in docker containers

By default, processes in the container run with r...

Vue implements infinite loading waterfall flow

This article example shares the specific code of ...

View the port number occupied by the process in Linux

For Linux system administrators, it is crucial to...

Explanation of the usage of replace and replace into in MySQL

MySQL replace and replace into are both frequentl...

Example of using JSX to build component Parser development

Table of contents JSX environment construction Se...

Detailed explanation of JavaScript state container Redux

Table of contents 1. Why Redux 2. Redux Data flow...

HTML table tag tutorial (13): internal border style attributes RULES

RULES can be used to control the style of the int...

How to install openjdk in docker and run the jar package

Download image docker pull openjdk Creating a Dat...