Vue 插槽使用大全

1.组件-插槽

• 概念: 用于实现组件的内容分发, 通过 slot 标签, 可以接收到写在组件标签内的内容

• 当组件内某一部分标签不确定时用插槽技术

• vue提供组件插槽能力, 允许开发者在封装组件时，把不确定的部分定义为插槽

• 语法口诀:

  • 组件内用占位
  • 使用组件时夹着的地方, 传入标签替换slot

• 如果外面不给传, 想给个默认显示内容

  • 默认内容

2.组件-具名插槽

• 当一个组件内有2处以上需要外部传入标签的地方

• 传入的标签可以分别派发给不同的slot位置

• 要求:

  • v-slot一般用跟template标签使用 (template是html5新出标签内容模板元素, 不会渲染到页面上, 一般被vue解析内部标签)

      <div>
         <slot name="title"></slot>
     </div>
    
      <slot name="content"></slot>
复制代码

        //写法1
         <template v-slot:title>
           <h4>我是内容</h4>
         </template>
         
         // v-slot可以简化成#使用
         
         //写法2
          <template #title>
           <span style="color: red;">我是标题</span>
         </template>
复制代码

v-slot可以简化成#使用

v-bind可以省略成: v-on: 可以省略成@ v-slot: 可以简化成#

总结: slot的name属性起插槽名, 使用组件时, template配合#插槽名传入具体标签

3.组件-作用域插槽

• 使用: 使用组件插槽技术时, 需要用到子组件内变量

• 子组件里值, 在给插槽赋值时在父组件环境下使用

• 口诀:

  • 子组件, 在slot上绑定属性和子组件内的值
  • 使用组件, 传入自定义标签, 用template和v-slot=”自定义变量名”
  • scope变量名自动绑定slot上所有属性和值

    作用域插槽
      <slot name="body" :row="item"></slot>

  { row } 解构了
    <template #body="{ row }">{{row.XX}}</template>

//子组件
       <slot :row="obj">
           <!-- 默认值给上,如果使用组件不自定义标签显示默认文字 -->
           {{ obj.headImgUrl}}
       </slot>
复制代码

//父组件
        <template v-slot="scope">
             <a :href="https://juejin.cn/post/scope.row.headImgUrl">{{ scope.row.headImgUrl }}</a>
        </template>
   
 
复制代码