几张图看懂Vue插槽

 父组件App.vue

引入子标签Slot

里面插入一段456代码

<template>
    <div>
        <Slot>
            <h2>456</h2>
        </Slot>
    </div>
</template>

<script>
import Slot from './components/Slot.vue'

子组件Slot

在子组件中定义三个<slot>插槽标签，父组件中在子组件标签插入的内容将会替代slot标签的内容

<template>
  <div>
      <h3>123</h3>
      <slot>内容一</slot>
      <slot>内容二</slot>
      <slot>内容三</slot>
  </div>
</template>

页面效果展示出来的就是，我们插入一个456替换了三个slot标签的内容 。

 觉得内容太多了是不是，用一下具名插槽

 现在给三个插槽都起个名

<template>
  <div>
      <h3>123</h3>
      <slot name=“one”>内容一</slot>
      <slot name=“two”>内容二</slot>
      <slot name=“three”>内容三</slot>
  </div>
</template>

父组件中slot指定为two，子组件内容二将会被替换为456 

<template>
    <div>
        <Slot>
            <div slot="two"><h3>456</h3></div>
        </Slot>
    </div>
</template>