preface

Hello everyone, HERE I am again to continue our topic of Vue mixins last week. After several days of research, WE found that Vue mixins cannot replace Vuex global state management or EventVue parameter transfer. Please see the explanation below for why.

Introduction to the Vue mixins

My personal understanding of mixins is to define some common methods or calculation attributes, and then mix them into various components for easy management and unified modification

Having said that, I think you must be eager to know what a Vue mixins is. No hurry. Let’s see what Vue official website says

Cn.vuejs.org/v2/guide/mi…

Mixins are a very flexible way to distribute reusable functionality in Vue components. Mixin objects can contain any component option. When a component uses a mixin object, all mixin options are mixed with the component’s own options.

From the above explanation, we can know that Vue mixins is a kind of mixing method. After mixing, it will merge with components to form a new component, and the method in the same name will overwrite the current method, so it needs to be careful when naming. Ok, the following is the same as before to learn the use of Vue mixins through actual combat.

First of all, simulate an environment for actual combat operation, say the simplest we are usually useful to the bullet frame believe that you are not unfamiliar with this, so I will take the bullet frame as an example, write a pop-up example.

The first step is to create a mixins.js, which reads like this

export default {
    data() {
        return{// Two parameters control frame and mask layer this_pop-up:false,
            this_shade:false}},created() {},mounted() {},
    methods: {
        pop-up:function(){
            this.this_pop-up=true;
            this.this_shade=true;
        },
        pop-up_close:function(){
            this.this_pop-up=false;
            this.this_shade=false; }}}Copy the code

So that’s the popup I need to pop up and hide, if you want to add a little bit of motion you can do that but I’m not going to do that.

Next comes the introduction of mixins.js, where we create an A.ue file

<button v-on:click="pop-up()"<div class= </button> <div class="shade" v-show="this_shade"></div>
<div class="prpo_up" v-show="this_pop-up">
    <input type="submit" value="Closed">
</div>

import mixins from './mixins.js'
export default {
  name: 'personalcenter',
  data:function() {return{}}, mixins[mixins]}. Shade {position: fixed; left: 0; right: 0; bottom: 0; top: 0; background:# 000;Opacity: 0.3; z-index: 100; } .prpo_up{ position: fixed; z-index: 2000; width: 200px; height: 448px; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; padding: 0; pointer-events: auto; border-radius: 4px; background-color:#fff;
}
.prpo_up input{
    font-size: 12px;
    position: absolute;
    left: 40px;
    bottom: 75px;
    width: 332px;
    height: 42px;
    color: #fff;
    text-align: center;
    line-height: 42px;
    border-radius: 2px;
    background: #3F79FF;
    outline: none;
    cursor: pointer;
    border: 0;
}
Copy the code

This completes the call but the method is not wrapped as a global method and can only be referenced as an import. This is how Vue mixins are used, not globally referenced.

Vue Mixins to be aware of

Let’s talk about using the Vue mixins note points, first of all, you should understand a bit, using the Vue mixins methods and parameters are not Shared, methods and parameters are not Shared, methods and parameters is one of the most important thing is not Shared three times, don’t assume that such thing as a method of feasible, after the test, I really is not enough, For example, when A. Vue and B. Vue call the same method at the same time, the methods and properties of the two sides do not communicate with each other. To be clear, Vue mixins are a supplement, acting as a function of component control but actually participating in the method of transferring data. To be clear, they can be used as a plug-in or component. But when it comes to data, you still have to transmit and write it yourself. That’s all I want to talk about in this episode, but I recommend you check out Vue mixins. Thank you.