V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
anshengmecom
V2EX  ›  Vue.js

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

  •  
  •   anshengmecom · 2016-10-11 01:51:23 +08:00 · 15148 次点击
    这是一个创建于 2970 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    8 条回复    2016-10-17 10:34:55 +08:00
    ETiV
        1
    ETiV  
       2016-10-11 05:55:08 +08:00 via iPhone
    关键字是 props
    leopku
        2
    leopku  
       2016-10-11 09:10:10 +08:00
    都上 2.0 了, vuex
    ooTwToo
        3
    ooTwToo  
       2016-10-11 09:21:46 +08:00 via iPhone
    官网文档上有个“组件传值”,你可以看一下,组件层级复杂的可以上 vuex
    SourceMan
        4
    SourceMan  
       2016-10-11 09:54:38 +08:00
    按照 react 的思路,用 vuex 而不是 props ,而且现在 props 也单向流动了。
    Seita
        5
    Seita  
       2016-10-11 09:56:01 +08:00 via Android
    额,你可以把你在 vue-cli 上的 issue 关了吗。。那不是给你提这种问题的地方。
    Seita
        6
    Seita  
       2016-10-11 10:01:04 +08:00 via Android
    哦忘了已经关了 😂 你可能不知道有 vuejs.org 😓
    anshengmecom
        7
    anshengmecom  
    OP
       2016-10-11 12:10:15 +08:00
    @Seita 哈哈,之前忘记了还有个 bbs ,就跑去问了。
    lygmqkl
        8
    lygmqkl  
       2016-10-17 10:34:55 +08:00
    vuex ,其实一开始就应该默认使用 vuex 习惯了就自动解决了一些坑
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3403 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 11:35 · PVG 19:35 · LAX 03:35 · JFK 06:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.