Vue basics--axios merge requests and slot

1. Axios merge request

export default {
  data(){
    return {}
  },
  created(){
    function getMsg(res1,res2){
      (res1)
      (res2)
    }
    this.$([
        this,('URL','key=value'),
        ('URL')
      ])
      .then(this.$(getMsg)) //Distribute the response      .catch(err => { 
        (err)
      })
  }
}

This allows two requests to be sent, and only if all of them are successful can it be considered successful. As long as there is one failure, it is a failure.

2. Slot slot

1. Basic usage

The emergence of slots allows us to add new content to the subcomponents when using them, rather than simply using them, presenting a diverse subcomponent.

<navigation-link>
 Your Profile
</navigation-link>

When we use child componentsnavigationWhen writing something in the child component, but if our child component'stemplateThere is no slot in itslot, then we wrote itYour ProfileIf you put a place without it, how do you know where the subcomponent should be placed? If you don’t know where to put it, it simply stops and will discard the content written. Everyone will think that nothing has happened. It will present the subcomponent as it will be written, completely ignoring what you wrote when using it, and treating it as if it is not seen.
But if we write a slot in the child componentslot, then the content we pass in will be presented in this slot. Like below

<a v-bind:href="url" rel="external nofollow" rel="external nofollow" class="nav-link">
 <slot></slot>
</a>

The rendered result will be:

<a v-bind:href="url" rel="external nofollow" rel="external nofollow"  class="nav-link">
  Your Profile
</a>

2. Named slots

Sometimes, we need to put multiple content in the child component, then you only have oneslot, it can only be put all here (actually I don't know if this is the case, I haven't tried it), if you have multipleslot, how does it know which content to put on whichslot, put it in order? No (I don't know if it is). The correct way to do this is to use named slots. The so-called named slot is anameofslot. That's what's below

<!---->
<div class="container">
 <header>
  <slot name="header"></slot>
 </header>
 <main>
  <slot></slot> <!--Default slot-->
 </main>
 <footer>
  <slot name="footer"></slot>
 </footer>
</div>

Then when using the above subcomponent like this

<base-layout>
 <template slot="header">
  <h1>Here might be a page title</h1>
 </template>

 <p>A paragraph for the main content.</p>
 <p>And another one.</p>

 <template slot="footer">
  <p>Here's some contact info</p>
 </template>
</base-layout>

When used, by aslotThe attribute label, the attribute value corresponds to the attribute valueslotofname, put the content in the corresponding position of the subcomponent.

We noticed that there is no specifiednameofslot, it is the default slot. All things passed in when using child components, as long as they are not specifiedslot='slot's name', they will be placed here.

We also noticed that the one used here is calledtemplateDo you have to use the label? No, you can also put it directlyh1orpAbove, like below

<base-layout>
 <h1 slot="header">Here might be a page title</h1>

 <p>A paragraph for the main content.</p>
 <p>And another one.</p>

 <p slot="footer">Here's some contact info</p>
</base-layout>

But if you don't have only oneh1, You have other contents to put together in this slot, what can you do? Add to each tag that needs to be placed in the slotslotIs it? Too troublesome! So put togethertemplateInside, givetemplateaddslotOK.

3. Default content of slots

Sometimes, we also need to specify default content for a certain slot. For example, a button is displayed by default, but sometimes when we reuse it, we want to change it to something else. At this time, we can put the submit of this buttonslotInside, and when using this subcomponent, put what you want to change and change it. If not put, it is the default submit.

<button type="submit">
 <slot>Submit</slot> <!--SubmitIt's the default content of the slot-->
</button>

4. Scope

When passing values ​​in a slot, if you want to use data, this data should be of the parent component, not of the child component. That is to say, the component that uses the subcomponentdata。

<navigation-link url="/profile">
 Logged in as {{  }} 
</navigation-link>

The user here is notnavigation-linkbut the parent component

Keep in mind one rule: everything in the parent component template will be compiled within the parent scope; everything in the child component template will be compiled within the child scope.

5. Scope slot [2.1.0+ added] (I don’t know why I call this name, it’s too similar to the slot, it’s easy to get confused)

As we mentioned above, slots have functions and when we use subcomponents, we cannot obtain data from subcomponents. And sometimes, we need to get it, so what should we do?

For example, a nametodo-listThe subcomponent of , its contents are as follows:

<ul>
 <li v-for="todo in todos"  v-bind:key="">
  {{  }}
 </li>
</ul>

At this time, the data obtained here is the data inside the subcomponent itself. But when we use this child component, we cannot get it (of course we can use the communication between parent and child components we have learned before), we can use itslotTo achieve this goal

<ul>
 <li v-for="todo in todos" v-bind:key="" >
  <!-- We are for each todo A slot was prepared，-->
  <!-- Will `todo` Object as a slot prop Incoming。-->
  <slot v-bind:todo="todo">
   <!-- Rewind content -->
   {{  }}
  </slot>
 </li>
</ul>

Then when we use the todo-list component, we can do this

<todo-list v-bind:todos="todos">
 <!-- Will `slotProps` Name defined as slot scope -->
 <template slot-scope="slotProps">
  <!-- Customize a template for the to-do item，-->
  <!-- pass `slotProps` Customize each to-do item。-->
  <span v-if="">✓</span>
  {{  }}
 </template>
</todo-list>

At this time, even if we are in the parent component, we can still obtain the data of the child component. inslotPropsJust a name, we useslot-scopeSpecify the name, you can use it belowxx.To get the subcomponentdata
On 2.5.0+, slot-scope is no longer restricted to the <template> element, but can be used on any element or component within the slot.

The above is a detailed explanation of axios and slot in vue. For more information about vue axios and slot, please follow my other related articles!