关于前端:vuejs的vsolt-插槽基础使用具名插槽作用域插槽等

根本应用

组件通过 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>