1.普通插槽

父組件

<template>
  <van-panel title="普通插槽">
    <Child>hello child,我來自父組件</Child>
  </van-panel>
</template>

<script>
import Child from "./Child";
export default {
  components: {
    Child
  }
};
</script>

<style>
</style>

子組件

<template>
  <div style="border: 1px solid green;">
    <h4>這是Child組件</h4>
    <!-- 用來存放父組件的內(nèi)容 -->
    <slot></slot>
    <p>我喜歡編程</p>
  </div>
</template>

<script>
export default {};
</script>

<style>
</style>

此時(shí)可以顯示父組件插在子組件里的內(nèi)容

2.具名插槽

父組件

<template>
  <van-panel title="具名插槽">
    <Child>
      <p slot="left">
        <van-button>左邊</van-button>
      </p>
      <p slot="right">
        <van-button>右邊</van-button>
      </p>
    </Child>

    <!-- vant的slot -->
    <div slot="footer">
      <van-button type="primary">點(diǎn)擊</van-button>
    </div>
  </van-panel>
</template>

<script>
import Child from "./Child";
export default {
  components: {
    Child
  }
};
</script>

<style>
</style>

子組件

<template>
  <div class="flex jc-sa" style="border: 1px solid green;">
    <!-- 接收父組件對(duì)應(yīng)的內(nèi)容 -->
    <slot name="left"></slot>
    <!-- <slot name="right"></slot> -->
  </div>
</template>

<script>
export default {};
</script>

<style>
</style>

接受了父組件傳來的slot 名字，并可以選擇使用