如有一个首页组件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
这个参数改为动态的。
1
ETiV 2016-10-11 05:55:08 +08:00 via iPhone
关键字是 props
|
2
leopku 2016-10-11 09:10:10 +08:00
都上 2.0 了, vuex
|
3
ooTwToo 2016-10-11 09:21:46 +08:00 via iPhone
官网文档上有个“组件传值”,你可以看一下,组件层级复杂的可以上 vuex
|
4
SourceMan 2016-10-11 09:54:38 +08:00
按照 react 的思路,用 vuex 而不是 props ,而且现在 props 也单向流动了。
|
5
Seita 2016-10-11 09:56:01 +08:00 via Android
额,你可以把你在 vue-cli 上的 issue 关了吗。。那不是给你提这种问题的地方。
|
7
anshengmecom OP @Seita 哈哈,之前忘记了还有个 bbs ,就跑去问了。
|
8
lygmqkl 2016-10-17 10:34:55 +08:00
vuex ,其实一开始就应该默认使用 vuex 习惯了就自动解决了一些坑
|