vue.js的v-solt 插槽（基础使用、具名插槽、做用域插槽等）

基本使用

组件经过slot预留位置，使用组件的时候，能够经过传递具体的内容去替换slot占用的地方，这就是插槽。

好比如今定义了一个组件：

<!--
simple-use.vue
-->
<template>
  <div>
    <slot></slot>
  </div>
</template>

组件<slot></slot>占用的位置具体内容不肯定，须要使用的时候传递进来，咱们就能够这样使用：

<simple-use>
  <em style='color:red'>传递给插槽的内容（能够是文本，标签或者组件等）</em>
</simple-use>

最终的结果能够理解为：

<template>
  <div>
    <!-- <slot></slot> 这个标记的内容被下面的代替了 -->
    <em style='color:red'>传递给插槽的内容（能够是文本，标签或者组件等）</em>
  </div>
</template>

给插槽一个默认值

有时候，咱们可能但愿slot有一个本身的默认值，在没有传递数据给组件的时候，使用默认数据。
想实现这样给功能很简单，只要在slot直接添加默认值便可，好比：

<!--
default-content.vue
-->
<template>
  <div>
    <slot>
      没有传递数据时候的默认值
    </slot>
  </div>
</template>

使用的时候就能够传递或者不传递数据：

<default-content></default-content>
<default-content>这是传递的数据</default-content>

最终的结果能够理解为：

<template>
  <div>
      没有传递数据时候的默认值
  </div>
</template>

<template>
  <div>
    这是传递的数据
  </div>
</template>

咱们看见，第一个选择了默认数据，第二个使用了传递进去的数据。

舒适提示：父级模板里面的全部内容都是在父级做用域中编译的，子模板里面的全部内容都是在子做用域中编译的。

具名插槽

有时候slot可能有多个，为了对应起来，能够给slot起名字，传递的时候对应起来：

<!--
name-slot.vue
-->
<template>
  <ul>
    <li>
      <slot name='index1'></slot>
    </li>
    <li>
      <slot name='index2'></slot>
    </li>
    <li>
      <slot></slot>
    </li>
  </ul>
</template>

咱们定义了三个slot，其中二个名字分别叫index1和index2，第三个没有定义名称，默认名称是default，所以，咱们在使用的时候就须要这样使用：

<name-slot>
  <template v-slot:index1>
    地方1
  </template>
  <template v-slot:index2>
    地方2
  </template>
  <template v-slot:default>
    默认地方
  </template>
</name-slot>

咱们经过v-slot:name的方式把template模板和slot对应了起来，所以运行后的结果就是：

<!--
name-slot.vue
-->
<template>
  <ul>
    <li>
      地方1
    </li>
    <li>
      地方2
    </li>
    <li>
      默认地方
    </li>
  </ul>
</template>

须要注意的是，v-slot只能添加在 <template>上（不过"做用域插槽"这种状况除外）。

做用域插槽

有时候咱们但愿在使用组件的是，让插槽内容访问子组件中的数据，能够经过插槽 prop这个特性实现：

<!--
scope-slot.vue
-->
<template>
  <div>
    <slot v-bind:message='message'></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: "来自子组件中的数据"
    };
  }
};
</script>

使用的时候，咱们须要接收一下：

<scope-slot>
  <!-- 这里的default表示默认的，若是有多个插槽，改成对应的插槽名字 -->
  <template v-slot:default='sub_scope'>
    {{sub_scope.message}}
  </template>
</scope-slot>

最终的结果就是：

<template>
  <div>
    来自子组件中的数据
  </div>
</template>