导航栏作为独立组件

最新推荐文章于 2025-05-18 23:29:17 发布

PatrickZheng

最新推荐文章于 2025-05-18 23:29:17 发布

阅读量928

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue

本文链接：https://blog.youkuaiyun.com/PatrickZheng/article/details/79212311

前端专栏收录该内容

5 篇文章

订阅专栏

将Vue官网的导航栏样例转化为独立组件，通过$refs实现组件间通讯，详细介绍了如何在父组件中调用子组件方法，实现在页面加载时自动选中指定的导航项，提供完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在element UI官网上找到导航栏样例，写成独立组件如下：

// navigator.vue
<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
    <el-menu-item index="1">处理中心</el-menu-item>
    <el-submenu index="2">
      <template slot="title">我的工作台</template>
      <el-menu-item index="2-1">选项1</el-menu-item>
      <el-menu-item index="2-2">选项2</el-menu-item>
      <el-menu-item index="2-3">选项3</el-menu-item>
    </el-submenu>
    <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: 'navigator',
  data () {
    return {
      activeIndex: '0'
    }
  }
}
</script>

在页面上使用该组件

// parent.vue
<template>
  <navigator ref="ttt"></navigator>
</template>

<script>
import navigator from '@/components/nav'
export default {
  data () {
    return {}
  },
  components: {
    navigator
  }
}
</script>

打开页面，展示如下：

发现刚加载好页面时，并没有选中任何一项。

搜索后发现组件间通讯的方法，可参考：
https://www.jianshu.com/p/6389d424965f

我使用了 $refs 来实现：
1、在 navigator.vue中添加处理方法

methods: {
    setActiveIndex (index) {
      this.activeIndex = index
    }
}

2、在另一个组件中，引用组件时加上 ref

<navigator ref="ttt"></navigator>

3、然后再加上处理（在 mounted 中添加，Vue生命周期请查看官网）

mounted: function () {
  this.$refs.ttt.setActiveIndex('1')
}

效果（加载完成时选中指定的选项）：
这里写图片描述

最后附上完整例子：

// navigator.vue
<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
    <el-menu-item index="1">处理中心</el-menu-item>
    <el-submenu index="2">
      <template slot="title">我的工作台</template>
      <el-menu-item index="2-1">选项1</el-menu-item>
      <el-menu-item index="2-2">选项2</el-menu-item>
      <el-menu-item index="2-3">选项3</el-menu-item>
    </el-submenu>
    <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: 'navigator',
  data () {
    return {
      activeIndex: '0'
    }
  },
  methods: {
    setActiveIndex (index) {
      this.activeIndex = index
    }
  }
}
</script>


// parent.vue
<template>
  <navigator ref="ttt"></navigator>
</template>

<script>
import navigator from '@/components/nav'
export default {
  data () {
    return {}
  },
  components: {
    navigator
  },
  mounted: function () {
    this.$refs.ttt.setActiveIndex('1')
  }
}
</script>