有关vue具名插槽的使用

具名插槽的使用

1.创建一个组件
navbar.vue

2.书写插槽

<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>

3.slot使用时

引入

import navbar from '@/components/navbar'
components:{
             navbar
            },

使用

 <nav-bar class="nav-bars">
 <div slot="center">购物街</div>
 </nav-bar>