如有一个首页组件dashboard.vue
<template>
<div>
<LeftMenu CurrentPath="/home"></LeftMenu>
<div id="right">
<RightHeaders></RightHeaders>
<h1>仪表盘</h1>
</div>
</div>
</template>
<script>
import LeftMenu from '../components/left-menu.vue'
import RightHeaders from '../components/right-headers.vue'
export default {
components: {LeftMenu, RightHeaders}
}
</script>
<style>
#right {
width: 87%;
float: right;
}
</style>
每次调用LeftMenu
的时候我都希望给这个组件传送一个CurrentPath
的值,left-menu.vue
文件内容如下:
<template>
<div id="left">
<div class="left-headers">
DarKer
</div>
<div class="left-menu">
<el-menu mode="vertical" theme="dark" v-bind:default-active="CurrentPath" :router="true">
<router-link to="/">
<el-menu-item index="/"><i class="el-icon-message"></i>仪表盘</el-menu-item>
</router-link>
<el-submenu index="5">
<template slot="title">用户管理</template>
<el-menu-item-group title="个人设置">
<el-menu-item index="/users/your-profile">个人资料</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="所有用户">
<el-menu-item index="/users/list">用户列表</el-menu-item>
</el-menu-item-group>
</el-submenu>
<router-link to="/messages">
<el-menu-item index="/messages"><i class="el-icon-message"></i>消息</el-menu-item>
</router-link>
</el-menu>
</div>
<h1>{{ CurrentPath }}</h1>
</div>
</template>
<script>
export default {
data () {
return {CurrentPath: ""}
}
}
</script>
<style>
#left {
background-color: #324057;
width: 13%;
height: 100%;
position: fixed;
}
.left-headers {
background-color: #7586a0;
height: 60px;
}
</style>
我只是需要把default-active
这个参数改为动态的。
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.