VUE-插槽slot

Posted 长不大的大灰狼

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE-插槽slot相关的知识,希望对你有一定的参考价值。

VUE-插槽slot

一、概述

Vue 实现了一套内容分发的 API,即:将<slot></slot>元素作为承载分发内容的出口。

插槽作用: 父组件标签内插入任意内容,子组件内控制摆放位置。
插槽分类:

  • 匿名插槽: 没有命名,有且只有一个
  • 具名插槽: slot标签带name命名的
  • 作用域插槽: 子组件内数据可以被父页面拿到(解决了数据只能从父页面传递给子组件的问题)

二、插槽的使用

1、匿名插槽
  • 匿名插槽只有一个
  • 一个不带 name 的 <slot> 出口会带有隐含的名字default
  • 父组件调用带有插槽的子组件,并传入值给子组件,替代子组件的默认值
<slot>默认值</slot>
2、具名插槽
  • slot 有name属性,可以有多个具名插槽
  • 在父组件使用插槽时,任何没有被包裹在带有v-slot 中的内容都会被视为默认插槽的内容

定义子组件base-layout.vue

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

父组件使用插槽:
在向具名插槽提供内容的时候,我们可以在一个 <template> 元素上使用 v-slot 指令,并以v-slot的参数的形式提供其名称:

<base-layout>
  <template v-slot:header>
    <h1>我是头部header</h1>
  </template>

  <p>未指定的内容默认归结为匿名插槽内容</p>

  <template v-slot:footer>
    <p>我是尾部footer</p>
  </template>
</base-layout>

注意:

  • v-slot 只能添加在父组件的<template>
  • 匿名插槽的默认名称:v-slot:default,也可以不写
  • 在 2.6.0 中,具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot指令)。它取代了slot 和 slot-scope这两个目前已被废弃但未被移除且仍在文档中的 attribute。
3、作用域插槽

(1)基本概念

  • 父级模板里的所有内容都是在父级作用域中编译的;
  • 子模板里的所有内容都是在子作用域中编译的。
  • 作用域插槽让父组件能够访问子组件中才有的数据。

子组件:

 <slot name="todo" :user="user" :test="test">
     user.lastName 
 </slot> 
 
data() 
    return 
      user:
        lastName:"张",
        firstName:"三"
      ,
      test:[1,2,3,4]
    
  ,

说明:
插槽中的 user.lastName 是默认数据,当父组件有内容后,会覆盖此处

父组件:

<todo-list>
 <template v-slot:todo="slotProps" >
   slotProps.user.firstName
 </template> 
</todo-list> 

说明:

  • slotProps 可以随意命名
  • slotProps 接取的是子组件标签slot上属性数据的集合所有v-bind:user="user"

(2)解构插槽Prop
当子组件插槽含有多个参数时,可以对插槽参数进行解构

父组件

<todo-list>
 <template v-slot:todo="user,test" >
   test 
 </template> 
</todo-list> 

子组件

<slot name="todo" :user="user" :test="test">
     user.lastName 
</slot> 

data() 
    return 
      user:
        lastName:"Zhang",
        firstName:"yue"
      ,
      test:[1,2,3,4]
    
  

(3)独占默认插槽
当子组件是 “独占默认插槽(子组件只含有默认插槽)” 时,组件的标签可以被当作插槽的模板(template)来使用。

父组件:

<todo-list v-slot:default="slotProps" >
   slotProps.user.firstName
</todo-list> 

子组件:

<slot :user="user" :test="test">
     user.lastName 
 </slot> 
data() 
    return 
      user:
        lastName:"Zhang",
        firstName:"yue"
      ,
      test:[1,2,3,4]
    
  

注意:

  • v-slot 的缩写形式为为字符 #v-slot:header 可以被重写为#header

参考文章:
[1] 【Vue】vue2.6插槽slot使用详解(更新v-slot用法总结)

以上是关于VUE-插槽slot的主要内容,如果未能解决你的问题,请参考以下文章

大前端之vue插槽slot

vue过滤器,slot插槽

vue 插槽slot向父组件传值

vue 2.6 插槽更新 v-slot 用法总结

vue - 插槽slot

VUE-插槽slot