Vue2.6 插槽

具名插槽

当我们组件需要用到多个插槽的时候, 需要用到具名插槽:

// subComponent
<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 的参数的形式提供插槽名称:

// parentComponent
<sub-component>
  <template v-slot="header">
    <h1>这里是header的插槽内容</h1>
  </template>

  <p>这里是默认插槽的插槽内容</p>
  <p>And another one.</p>

  <template v-slot:footer>
    <p>这里是footer的插槽内容</p>
  </template>
</sub-component>

当然, 也可以在一个 <template> 中包裹默认插槽的内容:

// parentComponent
<sub-component>
  <template v-slot="header">
    <h1>这里是header的插槽内容</h1>
  </template>
 
  <template v-slot:default>
    <p>这里是默认插槽的插槽内容</p>
    <p>And another one.</p>
  </template>

  <template v-slot:footer>
    <p>这里是footer的插槽内容</p>
  </template>
</sub-component>

任何的一种写法都会渲染出:

<div class="container">
  <header>
    <h1>这里是header的插槽内容</h1>
  </header>
  <main>
    <p>这里是默认插槽的插槽内容</p>
    <p>And another one.</p>
  </main>
  <footer>
    <p>这里是footer的插槽内容</p>
  </footer>
</div>

作用域插槽

有时候需要让插槽内容能够访问到子组件中才有的数据, 例如在 <user-info> 组件中:

// userInfo
<span>
    <slot name="user-info">{{ user.userName }}</slot>
</span>

此时, 在父组件中, 如果想要让它的后备内容显示用户的年龄, 以取代用户名, 如下:

// parentComponent
<current-user>
  <template>
    {{ user.age }}
  </template>
</current-user>

显然, 这段代码不会正常的工作, 因为只有 <user-info> 组件中才可以访问到 user, 而当前提供的内容是父组件渲染的。

为了让 user 在父组件的插槽内容可以被使用, 可以将 user 作为 <slot> 元素的一个特性绑定上去:

// userInfo
<span>
    <slot name="user-info" v-bind:user="user"></slot>
</span>

绑定在 <slot> 元素上的特性被称为 插槽prop , 现在在父组件中, 可以给 v-slot 带一个值来定义刚才提供的 插槽prop 的名字:

// parentComponent
<user-info>
    <template v-slot:user-info="slotProps">
    {{ slotProps.user.age }}
  </template>
</user-info>

独占默认插槽

当被提供的内容只有默认插槽时, 还有着下面的写法:

// userInfo
<span>
    <slot v-bind:user="user"></slot>
</span>

// parentComponent
<user-info v-slot="slotProps">
  <template v-slot:default="slotProps">
        {{ slotProps.user.age }}
    </template>
</user-info>

或者, 将组件的标签当做插槽的模板, 也就是把 <user-info> 当做 <template> 标签来使用。这样就可以把 v-slot 直接卸载组件的标签上:

// parentComponent
<user-info v-slot:default="slotProps">
    {{ slotProps.user.age }}
</user-info>

或者:

// parentComponent
<user-info v-slot="slotProps">
    {{ slotProps.user.age }}
</user-info>

注意：默认插槽的缩写语法不能和具名插槽混用, 否则会导致作用域不明确:

// parentComponent
<!--无效，会导致警告-->
<user-info v-slot="slotProps">
  {{ slotProps.user.age }}
    <template v-slot:other="otherSlotProps">
        slotProps is NOT available here
    </template>
</user-info>

只要是出现多个插槽的，必须为所有插槽使用完整的基于 <template> 的语法：

// parentComponent
<user-info>
    <template v-slot:default="slotProps">
        {{ slotProps.user.age }}
    </template>
    
    <template v-slot:other="otherSlotProps">
        ...
    </template>
</user-info>