插槽 slot 插槽 slot 插槽 slot-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_63327154/article/details/123316175

本文详细讲解了Vue组件中插槽的使用、默认插槽、具名插槽以及作用域插槽的区别，通过实例演示如何在父子组件间传递复杂模板结构和控制子组件数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

默认插槽

子组件 my-child
<template>
  <div>
    子组件
    <!--slot标签就是插槽,父组件提供内容 会覆盖slot里的内容 -->
    <!-- solt标签其实就是填充位 -->
    <!-- 如果父组件没有填充的插槽内容,那么默认显示slot标签里的内容 -->
    <slot>
      <div>1</div>
      <div>1</div>
    </slot>
  </div>
</template>


父组件
<template>
<div> 
   
     默认插槽 
     <my-child> 
    通过插槽可以向子组件传递复杂的模板结构 
     <div>     
        <div>传递的插槽内容</div>
        <div>其他信息</div>
     </div> 
    </my-child> 
  </div>
</template>

具名插槽顺序是由slot控制

子组件 my-chid1
<template>
  <div>
    <footer>
      <slot name='myFooter' />
    </footer>
    <header>
      <slot name='myHeader' />
    </header>
    <section>
      <slot name='mySection' />
    </section>
  </div>
</template>
<script>

父组件

 <!-- 具名插槽 -->
     <my-chid1>
      <template #myHeader>
        <h1>哈哈 我是Header的内容</h1>
      </template>
      <template v-slot:myFooter>
        <h1>嘿嘿 我是Footer内容</h1>
      </template>
      <template v-slot:mySection>
        <h1>嘻嘻 我是Section的内容</h1>
      </template>
    </my-chid1>

作用域插槽

子组件 my-child2
<template>
  <div>
    <div>作用域插槽</div>
    <hr>
    <slot :userInfo='userInfo'>
       用户信息:{{userInfo.firstName+' '+userInfo.lastName}}
    </slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userInfo: {
        firstName: 'Tom',
        lastName: 'Green'
      }
    };
  }
};

父组件
  <my-child2 v-slot:default='scopeUser'> 
      {{scopeUser.userInfo.lastName+' '+ scopeUser.userInfo.firstName}}
  </my-child2>
  <my-child2 v-slot='scopeUser'>
      <!-- 直接控制子组件的数据 -->
      {{scopeUser.userInfo.lastName+' '+ scopeUser.userInfo.firstName}}
  </my-child2>

名字反过来了

子组件 
<template>
  <div>
    <ul>
      <li v-for="item in todos" :key="item.id">
        <slot :todo='item'>
          111
        </slot>
      </li>

    </ul>
  </div>
</template>
<script>
export default {
  name: 'myTodos',
  data() {
    return {
      todos: [
        { di: 1, title: '去撸铁', isComplet: true },
        { di: 2, title: '去睡觉', isComplet: false },
        { di: 3, title: '敲代码', isComplet: true }
      ]
    };
  }
};
父组件
    <my-todos v-slot='scope'>
      {{scope.todo.isComplet ? '❤' : ''}} {{scope.todo.title}}
    </my-todos>