vue2.0 中的.vue 文件之间如何传递数据?

2016-10-11 01:51:23 +08:00
 anshengmecom

如有一个首页组件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这个参数改为动态的。

15144 次点击
所在节点    Vue.js
8 条回复
ETiV
2016-10-11 05:55:08 +08:00
关键字是 props
leopku
2016-10-11 09:10:10 +08:00
都上 2.0 了, vuex
ooTwToo
2016-10-11 09:21:46 +08:00
官网文档上有个“组件传值”,你可以看一下,组件层级复杂的可以上 vuex
SourceMan
2016-10-11 09:54:38 +08:00
按照 react 的思路,用 vuex 而不是 props ,而且现在 props 也单向流动了。
Seita
2016-10-11 09:56:01 +08:00
额,你可以把你在 vue-cli 上的 issue 关了吗。。那不是给你提这种问题的地方。
Seita
2016-10-11 10:01:04 +08:00
哦忘了已经关了 😂 你可能不知道有 vuejs.org 😓
anshengmecom
2016-10-11 12:10:15 +08:00
@Seita 哈哈,之前忘记了还有个 bbs ,就跑去问了。
lygmqkl
2016-10-17 10:34:55 +08:00
vuex ,其实一开始就应该默认使用 vuex 习惯了就自动解决了一些坑

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/311766

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX