Socket Socket vue learning

Slot

Slot (Slot) is a concept put forward by the Vue, as the name suggests, the slot for the decision to carry content, inserted into a specified position, so that the template block, has characteristics and greater modularity reusability.

Personal understanding: I feel content control slot is the parent component slot. He is what the label to show, and he wants to show content. Subassembly to control the position of the insertion slot.

Category slots : Slot divided into three. Anonymous slot named slot, as well as the scope of slots

Anonymous slot : that is the default slot. The contents of the default parent component is inserted into subassembly <slot> </ slot> position only.

Here is the display of results in page

Named slots : slot will be named, it is the sub-components of each slot would have given him a name (name). Then based on the command parameter subassembly parent components carried by the contents of the parent assembly inserted into the corresponding position.

If slot slot did not give the name, then the slot is equivalent to the default slot parent components v-slot does not pass parameter values will be inserted here.

// This is the parent component
<div class="father">
    <P> I am a parent component </ p>
    <! - introduced subassembly ->
    <basepage>
      <template v-slot:header>
        <! - to be inserted into the subassembly Content ->
        <P class = "con"> I am a parent component is inserted into the header content </ p>
        <br>
      </template>
      <template v-slot:footer>
        <! - to be inserted into the subassembly Content ->
        <P class = "con"> I am a parent component inserted footer content </ p>
      </template>
      <P> I am a parent component does not carry the argument that </ P>
      <br>
    </basepage>
  </div>

// This is a subcomponent

　　<template>
  　　<div class="son">
    　　<P> I am a subcomponent </ p>
    　　<br>
    　　<P> The following is a parent component inserted content: </ p>
    　　<br>
    　　<template>
      　　<-! V-slot in the parameter header is inserted here ->
      　　<slot name="header"></slot>
      　　<! - parent components do not pass the parameters will be inserted here ->
      　　<slot ></slot>
      　　<-! V-slot parameters to footer is inserted here ->
      　　<slot name="footer"></slot>
    　　</template>
  　　</div>
　　</template>

Show results

Scope slots : Achieving parent component sub-assemblies can access the data inside

In plain words of the parent component is replaced by labeling them subcomponents, but the content is provided by the sub-components.

// parent component Kazakhstan
<div class="father">
    <P> I am a parent component </ p>
    <! - introduced subassembly ->
    <basepage>
      <template  v-slot='news'>
        <! - to be inserted into the subassembly Content ->
        <P class = "con"> I am a parent component inserted footer content </ p>
        <br>
        <P> I content subassemblies: {{news.info}} </ p>
      </template>
    </basepage>
  </div>


// subassembly
<template>
  <div class="son">
    <P> I am a subcomponent </ p>
    <br>
    <P> The following is a parent component inserted content: </ p>
    <br>
    <template>
      <slot :info='message'></slot>
    </template>
  </div>
</template>
<script>
export default {
  name:'basepage',
  data() {
    return {
      the Message: "Come on it!"
    }
  }
}

Add some special cases

A supplement: we can write some of the label slot in the sub-assembly, the assembly if the parent is not written to the tag, then the default display the contents of the labels and sub-assemblies,

// parent component  
<div class="father">
    <P> I am a parent component </ p>
    <! - introduced subassembly ->
    <basepage>
    </basepage>
  </div>

// subassembly

<template>
  <div class="son">
    <P> I am a subcomponent </ p>
    <br>
    <P> The following is a parent component inserted content: </ p>
    <br>
    <template>
      <P> I am very happy, ah, hee hee </ P>
    </template>
  </div>
</template>

Supplementary two: v-slot in the slot in the name of the case may be abbreviated as #, so can not write without a slot Kazakhstan.

<! - this will trigger a warning ->
<current-user #="{ user }">
  {{ user.firstName }}
</ current-user>
 If you wish to use abbreviations, you must always be clear slot name instead:

<current-user #default="{ user }">
  {{ user.firstName }}
</current-user>

Supplementary III: Scope slot and put a piece of writing anonymous slot.

// This is the sub-components introduced in components of father and son
<div >
<P> I am a parent component </ p>
<children>
　　　　　　// attach value to bind directly behind the name!
　　　　　　<template  v-slot:fagognzi='content'>
                <-! Button ->
                <div v-if="rendWage(content.item, content.index)">
                    <el-button type="danger" size="small" plain round @click="onPaysendWage(content.item)">发工资</el-button>
                </div>
            </template>

</children>

Share slot on here, I hope we can have some harvest and Kazakhstan, but also please the great God who exhibitions.