vue 插槽

Posted 2020-12-08 zhongfang

vue的slot插槽分成默认插槽、具名插槽、作用域插槽；
插槽是存在于父子组件中使用，在子组件中决定插槽的位置，同时子组件也可以给插槽默认信息，当父组件中没有需要给子组件插槽插入信息时，显示的是子组件插槽定义的默认信息。

默认插槽

父组件

<template>
<!-- 插槽 -->
  <div>
    <children-slot>
      <p>我是父组件---默认插槽</p>
    </children-slot>
  </div>
</template>

import childrenSlot from ‘./childrenSlot‘
export default {
  components: {
    childrenSlot
  }
}

子组件

<template>
  <div class="children-slot">
    <p>默认插槽</p>
    <slot>我是默认插槽---子组件</slot>
  </div>
</template>

此时父组件的<p>我是父组件---默认插槽</p>就会替换掉子组件中slot中的内容。
未使用插槽

使用插槽

在子组件中，可以定义多个默认插槽，父组件中要插入的内容，都会被填充到这些默认的插槽中去。父组件中插入到子组件中的内容可以是dom、组件或者普通的数据结构。

具名插槽

在子组件定义插槽时，给对应的插槽分别起一个名字，这样父组件就可以通过v-slot来将内容根据name来填充对应的内容。
父组件

<template>
<!-- 插槽 -->
  <div>
    <div>
      <children-slot>
        <template v-slot:name1>
          <p>我是具名插槽name1</p>
        </template>
        <template v-slot:name2>
          <p>我是具名插槽name2</p>
        </template>
      </children-slot>
    </div>
  </div>
</template>

子组件

<template>
  <div class="children-slot">
    <p>具名插槽</p>
    <slot name="name1">我是具名插槽---子组件</slot>
    <slot name="name2">我是具名插槽---子组件</slot>
  </div>
</template>

作用域插槽

默认插槽和具名插槽子组件显示的内容都是由父组件决定，而作用域插槽可以由子组件自行决定显示什么内容。
父组件

<template>
<!-- 插槽 -->
  <div>
    <children-slot>
        <template slot-scope="scope">
          <p>
            {{scope.school}}
          </p>
        </template>
    </children-slot>
    <children-slot>
        <template slot-scope="scope">
          <p>
            {{scope.department}}
          </p>
        </template>
    </children-slot>
  </div>
</template>

子组件

<template>
  <div class="children-slot">
    <slot :school=‘school‘></slot>
    <slot :department=‘department‘></slot>

  </div>
</template>

<script>
<script>
export default {
  data() {
    return {
      school: ‘学院‘,
      department: ‘信息工程学院‘
    }
  }
}
</script>