Vue in the slot --- slot

One: What is the 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.
• Slot significant not show how the display is controlled by the parent component, while slot on display are controlled by the subassembly where

Two: how to use slot?

2.1 default slot

  Subassembly

<template>
    <div class="slotcontent">
        <ul>
            <!--<slot></slot>-->
            <li v-for="item in items">{{item.text}}</li>
        </ul>
    </div>
</template>
 
<script>
    export default{
        data(){
            return{
                items:[
                    {id:1,text:Paragraph 1''},
                    {id:2,text:'第2段'},
                    {id:3,text:'第3段'},
                ]
            }
        }
    }
     
</script>
 
<style scoped>
     
</style>

　Parent component

<template>
    <div>
        <h2>首页</h2>
        <router-link to="/home/details">跳转到详情</router-link>
        <p>父组件</p>
        <slotshow>
            <p>{{msg}}</p>
        </slotshow>
    </div>
</template>
 
<script>
    import slotshow from '../components/slotshow'
    export default{ data(){ return{ msg:"测试内容" } }, components:{ slotshow } } </script> <style> </style>

Renderings:

Explanation: This is the case if the content to be inserted in the parent element subassembly, the subassembly must be declared in the slot  label, if the template does not contain a sub-assembly <slot> jack, the content of parent element <p> {{msg}} </ p> will be discarded.

 When there is a default value <slot> <p> Default </ p> </ slot> slot, and a parent element is not to be content inserted in <slotshow> </ slotshow>, the displayed <p> Default </ p> (p tag will be removed), there is a default value when the slot, and the presence of the parent element of the content to be inserted in the <child>, the value set in the parent component is displayed,

2.2 anonymous slot

Subassembly

<template>
  <div class="slottwo">
    <div>slottwo</div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

 

Explanation: in the tag defines the slot three subassemblies, including two were added to the name attribute header and footer

Parent component

< Template > 
  < div > 
    I am a parent component 
    < slot-TWO > 
      < the p- > la la la, la la la, I was selling newspapers small expert </ the p- > 
      < Template slot = "header" > 
          < the p- > I the name for the slot header </ the p- > 
      </ Template > 
      < the p- slot = "footer" > I am a name for the footer of the slot </ the p- > 
    </ slot-TWO > 
  </ div > 
</template>

 

Explanation: The value to specify the contents of sub-assemblies realistic position to use template in the parent assembly and written into the corresponding slot (of course they do not have to write the template), other content is no corresponding value will be placed in the sub-assembly is not Add the name attribute in the slot.

2.3 Scope slot

 Subassembly

< Template > 
  < div > 
    I subassembly scope slots 
    < slot : Data = "User" > </ slot > 
  </ div > 
</ Template > 

< Script > 
Export default { 
  name: ' slotthree ' , 
  Data ( ) { 
    return { 
      User: [ 
        {name: ' Jack ' , Sex: ' Boy ' }, 
        {name: ' by Jone ', sex: 'girl'},
        {name: 'Tom', sex: 'boy'}
      ]
    }
  }
}
</script>

 

Explanation: The value of the label on the slot of sub-assemblies require binding

Parent component

<template>
  <div>
    我是作用域插槽
    <slot-three>
      <template slot-scope="user">
        <div v-for="item in user.data" :key="item.id">
        {{item}}
        </div>
      </template>
    </slot-three>
  </div>
</template>

 

Explanation: using slot-scope attribute on a parent component, user.data pass over the sub-assembly is the value

 

Probably can be understood: the

I understand the function of the variable parameters like the same 
function (Filed) { 
...... 
Field, 
...... 
} 
This slot is this variable, we just insert to which position (own predefined)

 

Reference documents:

https://www.cnblogs.com/loveyt/p/9946450.html

https://www.cnblogs.com/qq735675958/p/8377761.html