<template>
    <div class="father">
        <h3>這裡是父元件</h3>
        <child>
            <div class="tmpl">
              <span>選單1</span>
              <span>選單2</span>
              <span>選單3</span>
            </div>
        </child
 
>
    </div>
</template>

子元件：

<template>
    <div class="child">
        <h3>這裡是子元件</h3>
        <slot></slot>
    </div>
</template>

具名插槽

父元件：

<template>
  <div class="father">
    <h3>這裡是父元件</h3>
    <child>
      <div
 
 class="tmpl" slot="up">
        <span>選單1</span>
        <span>選單2</span>
        <span>選單3</span>
       
      </div>
      <div class="tmpl" slot="down">
        <span>選單-1</span>
        <span>選單-2</span>
        <span>選單-3</span
 
>
    
      </div>
      <div class="tmpl">
        <span>選單->1</span>
        <span>選單->2</span>
     
    </child>
  </div>
</template>

子元件：

<template>
  <div class="child">
    // 具名插槽
    <slot name="up"></slot>
    <h3>這裡是子元件</h3>
    // 具名插槽
    <slot name="down"></slot>
    // 匿名插槽
    <slot></slot>
  </div>
</template>

作用域插槽 （slot待資料）

子元件：

<template>
  <div class="child">

    <h3>這裡是子元件</h3>
    // 作用域插槽
    <slot  :data="data"></slot>
  </div>
</template>

單個插槽和具名插槽：不繫結資料，所以父元件是提供的模板要既包括樣式由包括內容的，上面的例子中，你看到的文字，“選單1”，“選單2”都是父元件自己提供的內容；

作用域插槽：父元件只需要提供一套樣式（在確實用作用域插槽繫結的資料的前提下）。