Haven’t written for a long time, pigeon time is a little long ~ so what are you busy with recently? Hey hey, I don’t say.

Today, I will open a new pit for you to talk about the knowledge points related to Vue. This pit is not deep, pure entry ~

What is a mixins

Before we get to that, the official explanation: “mixed.” Obscure. What is mixing? Mix what? I don’t know.

Since this stuff is so esoteric, let’s practice and see what the mix is.

There’s no telling what this thing is, not to mention. Read how to directly a summary of the understatement.

Say no more, go ~

The premise of this chestnut is that you know the component implementation of vue. But it’s okay if you don’t. The impact is not very big, I will fill in later)

` `'vue component Vue.component('tishi',{template'
            <div>
            <div @mouseenter = 'func1' @mouseleave = 'fnc2'>prompt</div>
            <div v-if='flag'>I'm a cute little hover</div>
            </div>
        `, data : function(){ return { flag:false } }, methods : { func1(){ this.flag = true }, func2(){ this.flag = false }, } }) Vue.component('toogle',{ template `
            <div>
            <button @click='func3'>Show/Hide</button>
            <div @click='fnc4'>Shut down</div>
            <div v-if='flag'>I am a can show can hide the little cute ~</div>
            </div>
        `, data : function(){ return { flag:false } }, methods : { func3(){ this.flag = ! this.flag }, fnc4(){ this.flag = false } } }) new Vue({ el:'#app', data:{ } })Copy the code

and
.

First to explain, these two are respectively why, the first tishi is that your mouse event in and out, will trigger different time, to control the hover small cute display or not, then the second, is to click to hide can be visible can be hidden little cute.

What do these two components have in common? Smart people might have seen that

Each of these external components has its own attribute, flag, and a hide method. This is… For programmers, it’s intolerable. It’s crazy to write the same thing twice.

At this time, will subconsciously think, how can lazy?

Well, when you think about it, that’s the point: mixins. Let’s see how it works. Okay

The chestnuts are modified with mixins:

` `Const common ={data: function(){return {flag:false}}, methods: { func1(){ this.flag = true }, func2(){ this.flag = false }, func3(){ this.flag = ! this.flag }, } } Vue.component('tishi',{ template `
            <div>
            <div @mouseenter = 'func1' @mouseleave = 'fnc2'>prompt</div>
            <div v-if='flag'>I'm a cute little hover</div>
            </div>
        `, mixins:[common] }) Vue.component('toogle',{ template `
            <div>
            <button @click='func3'>Show/Hide</button>
            <div @click='fnc2'>Shut down</div>
            <div v-if='flag'>I am a can show can hide the little cute ~</div>
            </div>
        `, mixins:[common] }) new Vue({ el:'#app', data:{ } })Copy the code

There we go. Let’s see what the difference is.

If you look at it at a glance, you’re just going to extract the common properties, the common methods that these two components use, and put them under one object. Then introduce them in their respective components, mixins:[common]. Then just change fNC4 to FnC2, the method is exactly the same ah.

Just happy. That way, even if there are other components later that need to create some common properties or methods. As long as the common to implement, components can be called ah, convenient, the program looks very comfortable.

The mixins here are in the component and are merged with the currently invoked component. That is, if you import the data and methods into the component, then the data and methods will be directly used by the introduced component.

Now, of course, you might say, what if I’m in a component, and I need to customize some other property or method?

Simple! Just write your own data, or mothods, directly to the component you want to add customization to. At this point, even the mixins introduced will be overwritten by the current one. The priority weight of the component itself is greater than the common.

Well, that’s it. At this point, it’s back to selling: what is mixing? I’m sure you have your own answer. The mixing is simply a container for repeating methods or repeating properties in multiple components. The word container, we should distinguish between the academic so-called container oh ~

All right, Mixins, after that, let’s move on to slots

What is the slots

The official definition: slot. Emmm. Is it confused again? What is it? I just had a mix, and now I have a slot? This is obviously something.

Ha ha ha, don’t worry, just mixed, have been understood what is going on, still afraid of this one slot?

Let’s do one more. I don’t believe in evil.

Another way to write components, see the components section for details, if there is a need, comment, I will open a new pit)

` `` vue components / / page < div id = 'app' > < card > < / card > < / div > -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- / / js 
       Vue.component('card',{ template : '#zujian' }) new Vue({ el:'#app', data:{ } })Copy the code

Ok, so this component is done, and for those of you who don’t understand what it says, this is actually a card component.

So what am I writing here? Emmm is a card component. Let’s talk about the purpose of writing this, for example, later in the development process, you may need to use a set of card components, so you can write one as above.

So if you have a project, you need to use multiple cards, and you need the content text, and it can’t always be: title, content, desc, do you want to write another component to introduce, or do you want to do that?

So let’s just change this component.

Chestnuts changed to 1.0

` `` vue components / / page < div id = 'app' > < card > 666 < / card > < / div > -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- / / js  
       Vue.component('card',{ template : '#zujian' }) new Vue({ el:'#app', data:{ } })Copy the code

When you’re done, what’s going to happen? Let’s guess. Hahaha, isn’t it obvious that this becomes dynamic.

Before we changed it, we introduced the card component, which was always title, content, desc, and now we can move. We can just specify content when we refer to card, instead of content.

This is a perfect solution to the problem of dynamically introduced card components that cannot be customized.

Is that all right? I can only change one of them. What if I want to change more? They melody.

Don’t believe in evil, come again

Chestnuts change 2.0

` `// page 
      
 
       

         I'm a body I was to describe the < div > < / card > < / div > -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- / / js < template id = 'zujian' > < div > 
        

         
 
        

         
 
        

         
 
       
  Vue.component('card',{ template : '#zujian' }) new Vue({ el:'#app', data:{ } })
      
Copy the code

At this point, what happens. Be bold and say your answer.

Right? I just define a card component and I can introduce as many requirements as the business wants me to introduce. Isn’t that simple?

At this point, I’m sure you already know what this is for. This definition is a slot, which is a very uncomfortable one. But from this example, I’m sure you know what this is for, and to sum it up, it’s all in the comments.

Final summary

With that said, it’s just a simple component reference that describes how and what these two functions can be used. But in fact, how these two in the project, the appropriate use, use just right, in fact, or to see the partners to combine their own business needs.

Write in the last

I was going to talk about vuex and Vue-Router in this section, but it seems that each of them needs a space to explain. Later there is time to open a new pit, to talk about these two.

Also, recently I am busy with what, ha ha ha, learning to cut video, ready to transition to be a mother ~, a key three ~

Ok, today is almost finished, if you think it’s good, just give me a thumbs up. Bye bye ~