Vue.js的slot插槽是什么？如何使用插槽？

Vue.js 的 slot 插槽是让封装的组件更具扩展性和复用性的一种方式。它允许父组件在子组件的模板中插值内容。

使用 slot 的好处:

1. 让组件更具有扩展性。用户可以根据自己的需求来定义组件内容。
2. 有利于组件复用。用户可以在不同的场景下,拼接出不同的组件外观。

slot 的基本用法:
在子组件中定义 slot:

html
<div>
  <slot>
    <!-- 如果没有分发内容则显示此处内容 -->
  </slot>
</div>

在父组件中通过 元素将内容分发到子组件:

html
<Child>
  <span>分发的内容</span>  
</Child>

在子组件的 slot 元素中定义的默认内容会在分发的内容为空的时候显示。

具名 slot 的用法:
在子组件中定义具名 slot:

html
<div>
  <slot name="one">
    <!-- 默认内容 -->
  </slot>
  <slot name="two">
    <!-- 默认内容 --> 
  </slot>
</div>

在向该组件中分发内容的时候,使用 slot 属性指向具名的 slot:

html
<Child>
  <span slot="one">分发的内容</span>  
</Child>

scope slot 用法:
如果要让 slot 的内容能够访问子组件的数据,可以在子组件的 slot 元素上使用 scope 属性:

html
<div>
  <slot name="one" 
    v-bind:user="user">
    <!-- 默认内容 -->
  </slot>  
</div>

在父组件分发内容的时候,通过使用 scope 来定义一个临时的变量来接收:

html
<Child>
  <template scope="props">
    <span>{{ props.user.name }}</span>
  </template>
</Child>

以上就是 Vue.js slot 插槽的主要用法,它为我们的组件带来更高的复用性和扩展性。