VueJS Slot (插槽)



  • 插槽内容

    Vue 实现了一套内容分发的 API,将 <slot> 元素作为承载分发内容的出口。
    它允许你像这样合成组件:
    <navigation-link url="/profile">
       Your Profile
    </navigation-link>
    
    
    然后你在 <navigation-link> 的模板中可能会写为:
    <a
       v-bind:href="url"
       class="nav-link"
     >
       <slot></slot>
    </a>
    
    
    当组件渲染的时候,<slot></slot> 将会被替换为“Your Profile”。插槽内可以包含任何模板代码,包括 HTML
    <navigation-link url="/profile">
       // 添加一个 Font Awesome 图标 
       <span class="fa fa-user"></span>
       Your Profile
    </navigation-link>
    
    
    如果 <navigation-link> 没有包含一个 <slot> 元素,则该组件起始标签和结束标签之间的任何内容都会被抛弃。
  • 编译作用域

    当你想在一个插槽中使用数据时,例如:
    <navigation-link url="/profile">
       Logged in as {{ user.name }}
    </navigation-link>
    
    
    该插槽跟模板的其它地方一样可以访问相同的实例属性 (也就是相同的“作用域”),而不能访问 <navigation-link> 的作用域。例如 url 是访问不到的:
    <navigation-link url="/profile">
       // 这里的 `url` 会是 undefined,因为 "/profile" 是
       // _传递给_ <navigation-link> 的而不是
       // 在 <navigation-link> 组件*内部*定义的。
       Clicking here will send you to: {{ url }}
    </navigation-link>
    
    
    注意:父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。
  • 单个插槽

    下面示例演示了单个插槽的使用,其中的 name 字段会在父组件中初始化并赋值:
    <div id="app">
       <test-slot>
             <h3>{{name}}</h3>
       </test-slot>
    </div>
          
    <script>
       Vue.component("test-slot",{
          // 插槽允许有默认内容
          template:'<div>'+
                   '<strong>VueJS</strong>'+
                   '<slot></slot>'+
             '</div>',
          data:function () {
                return {
                   name:"perry"
                }
          }
       });
    
       new Vue({
          el:"#app",
          data:{name:"你好vue插槽"}
       });
    </script>
    
    
    尝试一下
    HTML渲染结果:
    slot
  • 具名插槽

    有时我们需要多个插槽。例如对于一个带有如下模板的 <base-layout> 组件:
    <div class="container">
       <header>
         // 我们希望把页头放这里
       </header>
       <main>
         // 我们希望把主要内容放这里
       </main>
       <footer>
         // 我们希望把页脚放这里
       </footer>
    </div>
    
    
    对于这样的情况,<slot> 元素有一个特殊的特性:name。这个特性可以用来定义额外的插槽:
    <div class="container">
       <header>
          <slot name="header"></slot>
       </header>
       <main>
          <slot></slot>
       </main>
       <footer>
          <slot name="footer"></slot>
       </footer>
    </div>
    
    
    一个不带 name 的 <slot> 出口会带有隐含的名字“default”。
    在向具名插槽提供内容的时候,我们可以在一个 <template> 元素上使用 v-slot 指令,并以 v-slot 的参数的形式提供其名称:
    <base-layout>
       <template v-slot:header>
          <h1>Here might be a page title</h1>
       </template>
       
       <p>A paragraph for the main content.</p>
       <p>And another one.</p>
       
       <template v-slot:footer>
          <p>Here's some contact info</p>
       </template>
    </base-layout>
    
    
    现在 <template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。
    然而,如果你希望更明确一些,仍然可以在一个 <template> 中包裹默认插槽的内容:
    <base-layout>
       <template v-slot:header>
          <h1>Here might be a page title</h1>
       </template>
       <template v-slot:default>
          <p>A paragraph for the main content.</p>
          <p>And another one.</p>
       </template>
       <template v-slot:footer>
          <p>Here's some contact info</p>
       </template>
    </base-layout>
    
    
    任何一种写法都会渲染出:
    <div class="container">
       <header>
          <h1>Here might be a page title</h1>
       </header>
       <main>
          <p>A paragraph for the main content.</p>
          <p>And another one.</p>
       </main>
       <footer>
          <p>Here's some contact info</p>
       </footer>
    </div>
    
    
    注意 v-slot 只能添加在 <template> 上 (只有一种例外情况),这一点和已经废弃的 slot 特性不同。
  • 作用域插槽

    有时让插槽内容能够访问子组件中才有的数据是很有用的。
    作用域插槽在解决需要动态生成字符串模板时非常有用。
    下面示例演示了作用域插槽的使用:
    <div id="app">      
       <tableList v-bind:data="todos">
          <template slot="headslot">
             <tr>
                <td>编号</td>
                <td>标题</td>
                <td>状态</td>
             </tr>
          </template>
          <template slot="bodyslot" slot-scope="{item}">
             <td>{{item.id}}</td>
             <td>{{item.text}}</td>
             <td>{{item.isTrue}}</td>
          </template>
       </tableList>
    </div>
    <script>
       Vue.component("tableList",{
          props:{
                data:null
          },
          template:'\
             <table>\
                   <thead>\
                      <slot name="headslot"></slot>\
                   </thead>\
                   <tbody>\
                      <tr v-for="item in data">\
                         <slot name="bodyslot" v-bind:item="item"></slot>\
                      </tr>\
                   </tbody>\
             </table>\
             '
       });
    
       var vm = new Vue({
             el:"#app",
             data:{
                todos:[
                   {id:1,text:"活动1",isTrue:true},
                   {id:2,text:"活动2",isTrue:true},
                   {id:3,text:"活动3",isTrue:false},
                   {id:4,text:"活动4",isTrue:true},
                ]
             }
       }); 
    
    </script>
    
    
    尝试一下
    在父组件中只需要在 head 中指定 table 的 head 具体内容,对应的 body 中 tr 的每个 td 的字段绑定,其它交给组件处理 其中数据源是 tableList 中的 data 属性,与 slot 通信是通过 slot-scope 来实现数据域传递,组件中 v-bind:item="item" 与父组件 slot-scope="{item}" 完成数据访问的传递,其中 slot-scope="{item}" 语句也可以通过 "slot-scope="slotProps" 来实现数据传递,slotProps 对像相当于 slot 对象上所有 props 属性的根,通过 slotProps 对象都能访问到。
    v-slot 指令自 Vue 2.6.0 起被引入,提供更好的支持 slot 和 slot-scope 特性的 API 替代方案。v-slot 完整的由来参见这份 RFC。在接下来所有的 2.x 版本中 slot 和 slot-scope 特性仍会被支持,但已经被官方废弃且不会出现在 Vue 3 中。
  • 具名插槽的缩写

    v-onv-bind 一样,v-slot 也有缩写,即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header
    <base-layout>
       <template #header>
          <h1>Here might be a page title</h1>
       </template>
       <p>A paragraph for the main content.</p>
       <p>And another one.</p>
       <template #footer>
          <p>Here's some contact info</p>
       </template>
    </base-layout>
    
    
    然而,和其它指令一样,该缩写只在其有参数的时候才可用。这意味着以下语法是无效的:
    // 这样会触发一个警告 
    <current-user #="{ user }">
       {{ user.firstName }}
    </current-user>
    
    
    如果你希望使用缩写的话,你必须始终以明确插槽名取而代之:
    <current-user #default="{ user }">
       {{ user.firstName }}
    </current-user>