Preamble nonsense:

I didn’t have that deep understanding of vUE back then. The day before yesterday, I saw someone in the group asking how to use mixin. It’s not hard to look at it…

I’ll show you how mixins are used in Vue. Of course you know how to use mixins. If you want to see how typescript works, you can scroll down.

What is a mixin?

Mixins are a very flexible way to distribute reusable functionality in Vue components. Mixin objects can contain any component option.

Personal explanation: Old Wang in Gobi has a house (we define mixin), which has a bedroom, a kitchen and everything, and his sons Xiaoming and Daming (using mixin components). You can live in it, use everything in it, and renovate it.

How to use it?

So what does no code say…

Mixins are used in components:

<template>
  <div id="app"> <p>{{smallMing | cook}}</p> <p>{{bigMing | watch}}</p> </div> </template> <script> var house = { // Our Gobi Old King's House (our definition of mixin)data() {
    return { 
      Kitchen: 'kitchen',
      Tv: 'TELEVISION',
    }
  },
  filters: {
    cook: function (name) {
      if(! name)return ' '
      return name + "Cooking in the kitchen...";
    },
    watch: function (name) {
      return name + 'Watching TV... ';
    }
  },
  created: function() {
    setTimeout(function(){ console.log("what?"); }, 3000);
    console.log("?????");
  },
  methods: {
    runing: function () {
      console.log( `${this.laoWang }Running ') // will not be executed!! }}}export default {
  name: 'app',
  mixins: [house],
  data() {
    return { 
      smallMing: 'Ming',
      bigMing: 'Ming',
      laoWang: 'Lao wang',
    }
  },
  created: function() { console.log(this.Kitchen); / / kitchen console. The log (this. Tv); // Lao Wang is running. Don't disturb him. }, methods: {runing() {   
      console.log( `${this.laoWang }He's running. Leave him alone. `) } } } </script>Copy the code

Use mixins globally

Create a new mixin/house.js file under SRC and write the code...exportConst house = {... } Introduce import {house} from in main.js"./mixin/house"; Vue.mixin(house) Then you can have fun using mixins...Copy the code

Say two words

Then you’ll see the same effect… The nice thing about being global is you don’t have to introduce it everywhere, you can write some common methods. Otherwise, one by one, it’s really annoying…

As you can see intuitively, components can use all the method variables defined in mixins, so you can do all kinds of things.

Variables and methods with the same name will be replaced by the component

The life component is not replaced, but executes at the same time as the method in the component

Question and answer…

  • Q: Can all the functions of vue components be used in mixins?

  • Answer: should, the official should not cheat me…

  • Q: why is runing not executed in mixins, but in components?

  • Data objects are internally shallow merged (one level of attribute depth), and in case of conflicts with component data, component data takes precedence. Options that are values for objects, such as Methods, Components, and directives, will be mixed into the same object. When two object key names conflict, the component object’s key-value pair is taken. Vue.extend() is also merged using the same strategy.

  • Q: When will it be used and what are the application scenarios?

  • A: Filters, common methods, fixed values that components need to pass through prop… Code is dead, ideas are alive. How you use it is up to you…

  • Q: a 1/2 level root c “¨ I fell š holds a 1/2 level ™ e… A † ISO 10646 a ®š a ¹‰ A º† E €š c “¨

  • Answer: what you say what I don’t understand…

Vue-element-admin is also using mixins

So now you know how to use it, right?

Using… in Typescript

I won’t tell you much about how to use Typescript. You can read one of my previous posts.

Write small movie information projects in typescript+ Vue!

Don’t you feel like your head is spinning when you look at this picture? Don’t worry, I’ll break it down for you…

Myothermixin.ts file the filters that need to be noticed here are the filters filters that I looked for on GitHub. Just see this notation... The usual way to define some of the code that we need. import { Component, Mixins, Vue } from'vue-property-decorator';  
@Component({
  filters: {
    watch(name: string) {
      return name + 'Watching TV... '; }},})export class MyOtherMixin extends Vue {
  private Kitchen = 'kitchen';
  private Tv = 'TELEVISION';
  private created() {
    this.runing();
  }
  private runing() {
    // tslint:disable-next-line:no-console
    console.log(this.laowang + 'running'); }}Copy the code
App.vue file <template> <div id="app"> {{laowang | watch}} / / filter using < / div > < / template > < script lang ="ts">
import { Component, Mixins, Vue } from 'vue-property-decorator';
import { MyOtherMixin } from './MyOtherMixin';
@Component
export class MyMixin extends Vue {
   private created() {
    console.log('what? '); this.runing(); }} @component ({}) // Note that I'm using a Mixins method here. The js vue is mixinx: [MyMixin, MyOtherMixin], which inherits two Mixins.export default class App extends Mixins(MyMixin, MyOtherMixin) { 
  private test = "test";
  private laowang = 'laowang';
  created() {
    console.log(this.test)
    console.log(this.Kitchen)
    console.log(this.Tv)
  }
}
</script>
Copy the code
Import {MyOtherMixin} from is used globally"./MyOtherMixin";
Vue.mixin(MyOtherMixin);
Copy the code

There are several serious problems!

  • Global mount is the same as js version. An error is reported if there is currently no runing method called in the life component for example MyMixin.
  • Globally mounted MyOtherMixin doesn’t find variables in App components in methods.
  • Using vuex in TS is very painful.
  • There are many unknown bugs… Waiting to be discovered.

So don’t write THE TS version of VUE using variables from other components in the lifecycle. It’s better to write VUE in JS, because there are a lot of problems you don’t expect…

Finally: Thanks for reading and thanks for your support! Don’t forget to like and leave a reply!