Vue中插槽(slot)的使用

插槽(slot):是vue为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的，希望由【用户指定】的部分定义为【插槽】

插槽分为3类：默认插槽，具名插槽，作用域插槽

1.声明插槽，

每个插槽都有name属性，默认为default

<template>
  <div class="left-container">
    <!-- 当用户没有指定插槽是默认内容是slot标签里的内容 -->
    <slot name="default">这是default插槽默认的内容</slot>
  </div>
</template>

2.v-slot指令：

将内容渲染到指定插槽中

<template>
  <div class="app-container">
    <div class="box">
        <!-- 默认情况下,在使用组件的时候,提供的内容都会被填充到名字为default的插槽中 -->
        <!-- 1.如果要把内容填充到指定的名称的插槽中,需要v-slot:这个指令 -->
        <!-- 2.v-slot:要跟上插槽的名称 -->
        <!-- 3.v-slot:指令不能用在元素身上,只能用在template上 -->
        <!-- 4.template这个标签是一个虚拟的标签,只起到包裹的作用,但不会被渲染成实质性的html元素-->
        <!-- 5.v-slot: 简写为# -->
        <template v-slot:default>
          <p>这是Left组件的内容区域，声明p标签</p>
        </template>
    </div>
  </div>
</template>

3.具名插槽

在同一个组件中，我们有时需要多个插槽作为预留区域，此时，应该给每一个插槽取一个不同的name名称

如：定义了student组件，并设置了多个插槽。

<template>
  <div>
      <!-- 名字 -->
      <div class="username">
          <slot></slot>
      </div>
 
      <!-- 性别 -->
      <div class="sex">
          <slot></slot>
      </div>
 
      <!-- 年龄 -->
      <div class="age">
          <slot></slot>
      </div>
  </div>
</template>


<template>
  <div class="box">
    
 
    <student>
      <h3>xxxx</h3>
    </student>
  </div>
</template>

其中三个插槽名相同为default，在中写入的内容会同时渲染到名称相同的插槽，如果给插槽给上相应的name属性，就会避免这种情况

4.作用域插槽

<template>
  <div class="right-container">
    <h3>student 组件</h3>
 
    <div class="content-box">
      <!-- 在封装组件时,为预留的<slot>提供属性对应的值,这种用法叫做"作用域插槽" -->
      <slot name="content" msg="刘兰健"></slot>
    </div>
  </div>
</template>
 
<!-- 在上块代码中，设置了msg="刘兰健"，我们此时需要在插槽内容区内拿到该数据： -->
<!-- 插槽内容部分 -->
<student>
  <template v-slot.content="obj"> 
        <div>
          <p>{
   
   { obj.msg }}</p>
        </div>
      </template>
</student>
<!-- 这里的msg就能获取到成功渲染 -->

5.插槽传值

• 在child2中

<template>
  <div>
      <ul>
          <!-- 插槽传值 -->
          <slot :msg="newGames"></slot>
      </ul>
  </div>
</template>

<script>
export default {
    name:"child2",
    data() {
        return {
            newGames: ["天天酷跑", "PUBG", "LOL"],
        }
    },
}

• 在child1中

   <child2>
        <!-- 插槽数据接收， 只能在模板标签上接收 -->
        <template slot-scope="newGames">
          <ul>
            <li v-for="item in newGames.msg" :key="item.index">{
       
       {item}}</li>
          </ul>
        </template>
    </child2>
  

  这样就能把child2中的值传给child1，然后在将获取到的值渲染到列表中

  扫描二维码关注公众号，回复： 15908388 查看本文章