The article directories

      • Mixins are introduced
      • Mixins locally use and use the same hook function execution order
          • See the source code:
          • Execution Result:
          • Results analysis
      • Mixins function overwriting problem
          • Look at the source code
          • The execution result
          • Results analysis
      • Mixins variable substitution merge problem
          • Look at the source code
          • The execution result
          • Results analysis
      • Global reference mixins
          • Create a new mixinjs
          • The main js registration
          • Direct use of components
          • The execution result
      • Wrote back

Mixins are introduced

The official link

  • Speaking in human terms, VUE gives us a more flexible way to implement business implementation logic.

Mixins locally use and use the same hook function execution order

See the source code:
<template>
  <div class="hello">
    <input v-model="name" />
    <button @click="func_name()">Click on the</button>
  </div>
</template>

<script>
// Verify the order of the calls
var watchcount = {
  // Verify the order of the calls
  updated() {
    console.info(this.count + "I am The updated method for Mixins"); }};export default {
  name: "HelloWorld".data() {
    return {
      count: 0.name: ""
    };
  },
  mixins: [watchcount],
  updated() {
    console.info(this.count + "I am the updated method");
  },
  watch: {
    name: function(newval, oldval) {
      this.count++; }}};</script><! -- Add"scoped" attribute to limit CSS to this component only -->
<style scoped>
input {
  width: 250px;
  height: 30px;
  outline: none;
  border-radius: 4px;
  border: 1px solid # 000000;
}
button {
  width: 90px;
  height: 30px;
  outline: none;
  border-radius: 4px;
  color: #ffffff;
  border: none;
  background: burlywood;
}
button:hover {
  width: 90px;
  height: 30px;
  outline: none;
  border-radius: 4px;
  color: # 000000;
  border: none;
  background: burlywood;
}
</style>
Copy the code
Execution Result:

1 I am the updated method of mixins

Results analysis

We first see how mixins are used. We define a variable to directly implement the logic we need. Here I listen on the name in the input and perform an updated operation. So we verify that the first problem is the order in which mixins are executed. When the same hook function exists, mixins are executed first.

Mixins function overwriting problem

Look at the source code
<template>
  <div class="hello">
    <input v-model="name" />
    <button @click="func_name()">Click on the</button>
  </div>
</template>

<script>
// Verify the order of the calls
var watchcount = {
  methods: {
    func_name() {
      console.info(this.count + "I'm a method of method in mixins."); }}};export default {
  name: "HelloWorld".data() {
    return {
      count: 0.name: "".message : 'Hello, I'm from native Vue content'
    };
  },
  mixins: [watchcount],
  methods: {
    func_name() {
      console.info(this.count + "I am a method of method in native VUE"); }},watch: {
    name: function(newval, oldval) {
      this.count++; }}};Copy the code
The execution result

0 I am a method in native VUE

Results analysis

As a result of the above has the style of what all the stick up, so this case can’t stick style, his own test yourself is ok, here we say the phenomenon, we can see is when we used at the same time two functions with the same name, there will be a problem is that our mixins function is covered inside out, So this is something to watch out for.

Mixins variable substitution merge problem

Look at the source code
<template>
  <div class="hello">
    <input v-model="name" />
    <button @click="func_name()">Click on the</button>
  </div>
</template>

<script>
// Verify the merge of the same name
var minxin_data = {
  data : function() {
    return {
      message : 'Hello, I'm from Minxins.'.sex : "Male"}}}export default {
  name: "HelloWorld".data() {
    return {
      count: 0.name: "".message : 'Hello, I'm from native Vue content'
    };
  },
  mixins: [minxin_data],
  created() {
    console.info(this.$data)
  },
  watch: {
    name: function(newval, oldval) {
      this.count++; }}};</script>
Copy the code
The execution result

Count: 0 name: “” message:” hello, I’m from native Vue content”

Results analysis

As you can see, in mixins we define message and sex, and in vue we define message and name and count. The result is that the ones with the same name will be overwritten by the ones in the VUE, and the ones with different names will be added to a new array.

Global reference mixins

  • All we have said above is to reference a mixins locally. Let’s talk about how to reference a module globally
Create a new mixinjs
let mixin = {
    data() {
        return{}},methods: {
        func_name() {
            console.info("I'm a global mixin.")}}};export default mixin;
Copy the code
The main js registration
import Vue from 'vue'
import App from './App'
import Mixin from './states/mixins' // Do not write the path wrong
import router from './router'
Vue.mixin(Mixin) // Register to use
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
Copy the code
Direct use of components
<template>
  <div class="hello">
    <input v-model="name" />
    <button @click="func_name()">Click on the</button>
  </div>
</template>
Copy the code
The execution result

I’m from global mixins results: here I run directly, yes, if I will be all local and the inside of the vue commented out this function, that is to say, I preliminary test conclusion is global is not local priority, but the Internet is a global priority to my message, so the question remains to be proven. The other thing to notice here is that mixins are used globally without s.

Wrote back

  • Write here the use of mixins and the basic problems encountered are finished, but here simply say, we try to use our local when using, global may pollute some of our common components in the function, so use caution, distribute routes when using global is very convenient. Thank you for reading. If you like, you can pay attention to it and discuss with us. You can also add my wechat to the group.