slot插槽

插槽

插槽分为匿名插槽，具名插槽，作用域插槽

匿名插槽

子组件内部，设置 ，就可以使用匿名插槽，数据将方式在插槽对应的位置，如果有多个匿名插槽，将会每个插槽都有一份数据渲染

匿名插槽其实也是有名字的，为 default ，通常都是不写的

//  组件（父）
  <Card>
    <p>hello,world</p>
  </Card>

//  组件内部（子）
  <div class="cardItem">
    <h1>子页面</h1>
    <slot></slot>  // 注意：此处替换为了 <p>hello,world!</p>
  </div>

具名插槽

通过给插槽命名，以此来区分多个插槽
命名：v-slot:name 可简写为 #name

// 子页面
  <div class="cardItem">
    <h1>子页面</h1>
    
    <!-- 具名插槽 name需与要插入的地方v-slot：name对应 -->
    <slot name="header"></slot>
    
    <!-- name不写默认为default 会带出剩余其他的内容 -->
    <slot></slot>
    
    <slot name="footer"></slot>
  </div>
  
  
// 父页面
 <Card :myName="myName">
 
 	  <!-- 具名插槽的内容必须使用模板<template></template>包裹 -->
      <template v-slot:header>
        <p>头部</p>
      </template>
      
      <!-- v-slot: 可以缩写成（#）语法糖 -->
      <template #footer>
        <p>脚步</p>
      </template>

      <p>身体</p>
      
</Card>
// 子页面
// 头部、身体、脚步

作用域插槽

作用域插槽是带数据的插槽，子组件提供给父组件的参数

//子组件 ： (假设名为：ebutton)
<template>
  <div class='button'>
      <slot name='one' :value1='child1'> 这就是默认值1</slot>    //绑定child1的数据
      <slot :value2='child2'> 这就是默认值2 </slot>  //绑定child2的数据，这里我没有命名slot
  </div>           
</template>

new Vue({
  el:'.button',
  data:{
    child1:'数据1',
    child2:'数据2'
  }
})

//父组件：（引用子组件 ebutton）
<template>
  <div class='app'>
     <ebutton> 
        <template v-slot:one = 'slotone'>  
           {{ slotone.value1 }}    // 通过v-slot的语法 将子组件的value1值赋值给slotone 
        </template>
        <template v-slot:default = 'slottwo'> 
           {{ slottwo.value2 }}  // 同上，由于子组件没有给slot命名，默认值就为default
        </template>
     </ebutton>
  </div>
</template>

• 首先在子组件的slot上动态绑定一个值( :key=‘value’)
• 然后在父组件通过v-slot:name = 'values’的方式将这个值赋值给 values
• 最后通过{{ values.key }}的方式获取数据