vue插槽

一般插槽

当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上

<todo-list v-slot:default="slotProps">
  <i class="fas fa-check"></i>
  <span class="green">{{ slotProps.item }}</span>
</todo-list>

具名插槽

子: slot name
父: template v-slot:name

//子组件 ：
 <template>
  <hgroup class="common_header">
    <div class="left">
        <slot  name="left"> &lt; </slot>
    </div>
    <h1>
      <slot> </slot>
    </h1>
   <div class="right">
    <slot  name="right"> </slot>
   </div>
  </hgroup>
</template>

//父组件：（引用子组件 ebutton）<template>
  <Header>
    <template v-slot:left>
        上
    </template>
    <template v-slot:default>
        首页
    </template>
    <template v-slot:right>
        下
    </template>
  </Header>

作用域插槽

template slot-scope
作用:父组件对子组件的加工处理,子组件

示例1

element要修改原来的一个作用域的样式及数据：
1．在对应区域添加一个作用域插槽，并设置属性 slot-scope=”scope”
2.现在scope.row中就包含有这一行，或者说这个渲染项(item)的全部数据

    <ul>
          <li>
            <template slot-scope="scope">  //作用域插槽
                {{scope.row}}          //包含一项item项的全部数据,row是子组件定义的属性传参
            </template>
          </li>
      </ul>

示例二

子组件传递数据给父组件在插槽中调用

示例三

子组件Child.vue

<template> 
  <slot name="footer" testProps="子组件的值">
          <h3>没传footer插槽</h3>
    </slot>
</template>

父组件

child> 
    <!-- 把v-slot的值指定为作⽤域上下⽂对象 -->
    <template v-slot:default="slotProps">
      来⾃⼦组件数据：{{slotProps.testProps}}
    </template>
  <template #default="slotProps">
      来⾃⼦组件数据：{{slotProps.testProps}}
    </template>
</child>

小结

• v-slot属性只能在上使用，但在只有默认插槽时可以在组件标签上使用
• 默认插槽名为default，可以省略default直接写v-slot
• 缩写为#时不能不写参数，写成#default
• 可以通过解构获取v-slot={user}，还可以重命名v-slot="{user: newName}“和定义默认值v-slot=”{user = ‘默认值’}"