javascript - 如何理解Vue.js的组件中的slot?

Question

官方文档中这一节看不太懂，是否可以解释一下？slot应用场景在哪里？

Answer 1

文档很清楚，这里给个最浅显的例子。

比如你自己做了个一个button组件，在根组件里注册为vButton，从而复用。
那么各个button上的文字肯定是不同的，但是这些文字大部分情况下也是不需要动态更新的，那么就不必用props之类的方法从根组件向子组件传递文字，直接用slot即可。

button组件假如是这样：

<template>
  <button>
    <slot></slot>
  </button>
</template>

根组件就可以这样用它：

<v-button>按钮文字</v-button>

这是最简单的一个用法示例。

Answer 2

简单点说就是，能够在组件内写其他内容，举个例子:
我们有一个组件 app, 然后在页面中使用这个组件的时候:

<p>
  <app></app>
</p>

这个时候我们的app是已经定义好了内容的，那如果我想在app里再加入点其他内容呢，像这样：

<p>
  <app>
    <p>新添加的p标签</p>
  </app>
</p>

如果没有slot那上面这样写就会报错，如果我们在app组件内有一个slot那这样写就是可以的~

Answer 3

主要是让组件的可扩展性更强。
1.匿名slot使用

//定义组件my-component
<p class="myComponent">
  <slot></slot>
</p>
//使用方法
<my-component>
  <p>我就是slot的替代内容，这里可以放任何标签元素，即使是一长串ul>li列表</p>
</my-component>

2.具名slot使用

//定义组件my-component
<p class="myComponent">
  <slot name="mySlot"></slot>
</p>
//使用方法
<my-component>
  <p slot="mySlot">我就是这个叫mySlot的slot替代内容，这里可以放任何标签元素，即使是一长串ul>li列表，但是我是一个有名字的宝宝，所以你必须给我加上slot="mySlot"，不然我就报错给你看！</p>
</my-component>

如果不在有slot的组件里加入任何标签，slot什么都不会显示的。

Answer 4

官网其实已经解释得很清楚了 内容分发 简单点就是 一个组件的一部分 你不满足默认的内容太过简单 那么你可以将这部分定义成slot这个里面放默认的内容 当用户需要自定义这部分内容的时候就可以使用这个特性去定义自己更加高级 更加复杂的内容 使用方法文档都有 手机码字 我就不贴地址了

Answer 5

讲slot之前我们先来说一般组件，通常我们自定义一个组件，期待用户这样使用它们：

<自定义组件 :参数="variable" @事件="handler"></自定义组件>

这种组件产生的样式都在自定义组件的内部，使用者是无法对其进行调整的，或者说没办法通过传入一些html进行调整

现在假设我们有这样一个名片组件的需求，该名片组件的除了标题外还希望提供使用者便利可以自行调整主体内容的格式，设计的结果是这样：

<名片 :url="名片地址">
    <h1>我是我</h1>
    <strong>我就是不一样的烟火！！！</strong>
    <img src="我的头像在这里"></img>
</名片>

OK，看到了需求，用户希望你的组件可以这样使用，你怎么办？这就是slot出现的背景，最后上文档，方便理解

Answer 6

slot文档给的解释是插槽。刚开始看到这个名词也不是特别的理解。然后文档上写着说Angular的transclusion概念差不多。

wiki上有这样一句话解释:

transclusion在计算机科学中指的是讲一个文档或者一个文档的某部分在另一个文档中引用

所以你再去看文档和给个示例，那么应该有点感觉了。

它主要的作用就是父组件中自定义的内容插入到子组件所提供的匿名/具名插槽当中。

所以你可以在父组件中定义好额外的模板内容，

    <p class="parent">
        <child>
            <p>This child slot</p>   //需要插入到子组件的模板内容
        </child>
    </p>

child组件:

    <p class="child">
        <slot>This init child slot</slot>   //父组件插入的位置, 如果父组件中不提供需要插入的内容,那么就会显示子组件slot中默认的内容
    </p>