https://www.cnblogs.com/loveyt/p/9946450.html
vue in the slot ---- slot
What is a 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
How to use slot?
Slot default
Parent component
<template>
<div>
我是父组件
<slotOne1> <p style="color:red">我是父组件插槽内容</p> </slotOne1> </div> </template>Write what you want to display in the parent component sub-assemblies referenced in (you can use the label, you can not)
Subassembly (slotOne1)
<template>
<div class="slotOne1"> <div>我是slotOne1组件</div> <slot></slot> </div> </template>Content is written in the sub-assembly slot, slot position where the parent component is to be displayed
- Of course, then the parent component subassembly cited Other components may be written
Parent component
<template>
<div>
我是父组件
<slotOne1> <p style="color:red">我是父组件插槽内容</p> <slot-one2></slot-one2> </slotOne1> </div> </template>Subassembly (slotOne2)
<template>
<div class="slotOne2"> 我是slotOne2组件 </div> </template>
Named Slot
Subassembly
<template>
<div class="slottwo"> <div>slottwo</div> <slot name="header"></slot> <slot></slot> <slot name="footer"></slot> </div> </template>Tag defines three subassemblies slot, two of which were added to the name attribute header and footer
Parent component
<template>
<div>
我是父组件
<slot-two> <p>啦啦啦，啦啦啦，我是卖报的小行家</p> <template slot="header"> <p>我是name为header的slot</p> </template> <p slot="footer">我是name为footer的slot</p> </slot-two> </div> </template>Use template in the parent assembly and write slot values correspond to specify the content of reality in the sub-assembly position (of course they do not have to write the template), other content is no corresponding value will be placed in the sub-assembly did not add name slot in property
The default slot content
Parent component
<template>
<div>
我是父组件
<slot-two></slot-two> </div> </template>Subassembly
<template>
<div class="slottwo"> <slot>我不是卖报的小行家</slot> </div> </template>Default content may be written in a slot in the content tag subassembly, when the parent component does not write to the default content displayed subassembly when the write to the parent component, replace the subassembly
Compile Scope
Parent component
<template>
<div> 我是父组件 <slot-two> <p>{{name}}</p> </slot-two> </div> </template> <script> export default { data () { return { name： 'Jack' } } } </script>Subassembly
<template>
<div class="slottwo"> <slot></slot> </div> </template>
Scope slot
Subassembly
<template>
<div>
我是作用域插槽的子组件
<slot :data="user"></slot> </div> </template> <script> export default { name: 'slotthree', data () { return { user: [ {name: 'Jack', sex: 'boy'}, {name: 'Jone', sex: 'girl'}, {name: 'Tom', sex: 'boy'} ] } } } </script>Slot values on the label desired binding subassembly
Parent component
<template>
<div> 我是作用域插槽 <slot-three> <template slot-scope="user"> <div v-for="(item, index) in user.data" :key="index"> {{item}} </div> </template> </slot-three> </div> </template>Use slot-scope attribute on a parent component, user.data pass over the sub-assembly is the value
vue in the slot ---- slot
What is a 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
How to use slot?
Slot default
Parent component
<template>
<div>
我是父组件
<slotOne1> <p style="color:red">我是父组件插槽内容</p> </slotOne1> </div> </template>Write what you want to display in the parent component sub-assemblies referenced in (you can use the label, you can not)
Subassembly (slotOne1)
<template>
<div class="slotOne1"> <div>我是slotOne1组件</div> <slot></slot> </div> </template>Content is written in the sub-assembly slot, slot position where the parent component is to be displayed
- Of course, then the parent component subassembly cited Other components may be written
Parent component
<template>
<div>
我是父组件
<slotOne1> <p style="color:red">我是父组件插槽内容</p> <slot-one2></slot-one2> </slotOne1> </div> </template>Subassembly (slotOne2)
<template>
<div class="slotOne2"> 我是slotOne2组件 </div> </template>
Named Slot
Subassembly
<template>
<div class="slottwo"> <div>slottwo</div> <slot name="header"></slot> <slot></slot> <slot name="footer"></slot> </div> </template>Tag defines three subassemblies slot, two of which were added to the name attribute header and footer
Parent component
<template>
<div>
我是父组件
<slot-two> <p>啦啦啦，啦啦啦，我是卖报的小行家</p> <template slot="header"> <p>我是name为header的slot</p> </template> <p slot="footer">我是name为footer的slot</p> </slot-two> </div> </template>Use template in the parent assembly and write slot values correspond to specify the content of reality in the sub-assembly position (of course they do not have to write the template), other content is no corresponding value will be placed in the sub-assembly did not add name slot in property
The default slot content
Parent component
<template>
<div>
我是父组件
<slot-two></slot-two> </div> </template>Subassembly
<template>
<div class="slottwo"> <slot>我不是卖报的小行家</slot> </div> </template>Default content may be written in a slot in the content tag subassembly, when the parent component does not write to the default content displayed subassembly when the write to the parent component, replace the subassembly
Compile Scope
Parent component
<template>
<div> 我是父组件 <slot-two> <p>{{name}}</p> </slot-two> </div> </template> <script> export default { data () { return { name： 'Jack' } } } </script>Subassembly
<template>
<div class="slottwo"> <slot></slot> </div> </template>
Scope slot
Subassembly
<template>
<div>
我是作用域插槽的子组件
<slot :data="user"></slot> </div> </template> <script> export default { name: 'slotthree', data () { return { user: [ {name: 'Jack', sex: 'boy'}, {name: 'Jone', sex: 'girl'}, {name: 'Tom', sex: 'boy'} ] } } } </script>Slot values on the label desired binding subassembly
Parent component
<template>
<div> 我是作用域插槽 <slot-three> <template slot-scope="user"> <div v-for="(item, index) in user.data" :key="index"> {{item}} </div> </template> </slot-three> </div> </template>Use slot-scope attribute on a parent component, user.data pass over the sub-assembly is the value