vue组件封装

menu组件封装

app.vue

 <template>
  <div id="app">
    <vvMenu>
      <vvMenuItem>导航一</vvMenuItem>
      <vvMenuItem>导航二</vvMenuItem>
      <vvMenuItem>导航三</vvMenuItem>
    </vvMenu>

    <router-view/>
  </div>
</template>

<script>
import vvMenu from '@/components/vv-menu'
import vvMenuItem from '@/components/vv-menu-item'

export default {
  components: {
    vvMenu,
    vvMenuItem,
  },
}
</script>

vv-menu.vue

<template>
  <div>
    <!-- 默认插槽是没有名字 -->
    <ul>
      <slot></slot>
    </ul>
  </div>
</template>

vv-menu-item.vue

<template>
  <div>
    <li>
      <slot></slot>
    </li>
  </div>
</template>