【Vue】中三种插槽的使用

咸鱼妹妹

已于 2022-06-14 14:17:19 修改

阅读量559

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2022-03-18 14:14:41 首次发布

本文链接：https://blog.csdn.net/weixin_45884202/article/details/123573592

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue中三种插槽的用法：匿名插槽、具名插槽和作用域插槽。匿名插槽用于默认内容插入，具名插槽通过名字区分不同的插入位置，而作用域插槽允许传递组件内部的数据给父组件进行个性化定制。示例代码展示了如何在父组件和子组件间使用这些插槽进行内容分发。

摘要由CSDN通过智能技术生成

【Vue】中三种插槽的使用

插槽：
1.匿名插槽：没有为插槽指定名称
2.具名插槽：为slot设置名字的插槽就称为具名插槽
3.作用域插槽：在封装组件的过程中，可以为预留的 插槽绑定 props 数据(除了name)，这种带有 props 数据的 叫做“作用域插槽

1.匿名插槽
子组件（假设名字为child）
   <template>
       <div>
         <solt>这是一段文字<solt>
       </div>
   </template>
  父组件（father）
    <template>
       <div>
         <child></child>  
       </div>
   </template>


2.具名插槽
子组件（child）
   <template>
       <div>
         <slot></solt>
         <solt name="one"><solt>
         <solt name="two"><solt>
       </div>
   </template>
  父组件（father）: 使用简写：v-slot:名字 或者 #名字
    <template>
       <div>
        //没有设置名字的时候默认名字为name="default"
        <template v-slot:default> 这是插入到one插槽的内容 </template>。
        <template v-slot:one> 这是插入到one插槽的内容 </template>
        <template #two> 这是插入到two插槽的内容 </template>
       </div>
   </template>

3.作用域插槽
子组件（child）
   <template>
       <div>
         <slot name='ok'
          :myname='username'
          age='20'
          :hobby='hobby'>我要传递用户名给父组件</slot>
       </div>
   </template>
  父组件（father）
    <template>
       <div>
         <template v-slot:ok="value">   //value是个对象
           <span>{{value.myname}}</span>
           <span>{{value.age}}</span>
           <span>{{value.hobby}}</span>
         </template>
       </div>
   </template>