具名插槽的使用

 

定義插槽組件

 

創建一個組件

navlot.vue

書寫插槽

<template>

  <div class="nav">

    <div class="left">

      <slot name="left"></slot>

    </div>

    <div class="center">

      <slot name="center"></slot>

    </div>

    <div class="right">

      <slot name="right"></slot>

    </div>

  </div>

</template>

slot命名

使用時

 引入

import navslot from '@/components/nav/navslot'

    components:{

                navslot

              },

 

使用

   <navslot class="navs">

      <div class="left" slot="left">

       

      </div>

      <div slot="center">

 

      </div>

      <div slot="right">

          <van-icon name="more" size="40px" />

      </div>

    </navslot>