vue <menu-item>组件

`<menu-item>` 组件是 Vue.js 中用于创建菜单项的组件，可以用于构建导航菜单、侧边栏菜单等。

以下是一个简单的 `<menu-item>` 组件的例子：

<template>
  <li class="menu-item">
    <a :href="link">{{ text }}</a>
  </li>
</template>

<script>
export default {
  name: 'MenuItem',
  props: {
    text: {
      type: String,
      required: true
    },
    link: {
      type: String,
      required: true
    }
  }
}
</script>

<style>
/* 可以根据需求自定义样式 */
</style>

在上面的代码中，`<menu-item>` 组件接受一个 `text` 和 `link` 属性，分别用于设置菜单项的文本和跳转链接。该组件将 `text` 属性绑定到 `<a>` 标签的文本内容，将 `link` 属性绑定到 `<a>` 标签的 `href` 属性。

你可以在父组件中使用 `<menu-item>` 组件来创建菜单项，例如：

<template>
  <ul class="menu">
    <menu-item text="Home" link="/" />
    <menu-item text="About" link="/about" />
    <menu-item text="Contact" link="/contact" />
  </ul>
</template>

<script>
import MenuItem from './MenuItem.vue'

export default {
  name: 'Menu',
  components: {
    MenuItem
  }
}
</script>

<style>
/* 可以根据需求自定义样式 */
</style>

在上面的代码中，`<menu>` 组件使用了三个 `<menu-item>` 组件来创建菜单项。注意，在父组件中需要先导入 `<menu-item>` 组件，并注册为该组件的子组件。