Question

我有一个主页，用适当的道具调用所有模板，比如说

<sideBar :menu="menu"></sideBar>
<topBar></topbar>
<mainContent><mainContent>

问题是我有一个要调用的嵌套数据对象，这自然最好用parent-＆gt;实现。孩子们这样计划：

main page-> sideBar -> topBar -> mainContent

因为嵌套对象如下：

menu:{topLevelA:{midLevelA1:'lowContentA1'},
                {midLevelA2:'lowContentA2'},
      topLevelB:{midLevelB1:'lowContentB1'}}

自然如果使用道具，我可以很容易地传递给孩子和孙子，但是缺点是，很难找到模板设计，它看起来很乱并分散在几个地方，不像我现在的单页

我可以通过使用emit事件甚至是Vuex来选择具有相同级别子节点的主页，但这看起来不自然..嗯。

可能有更好的方法吗？

为清晰起见编辑：

<template>
  <div class="window">
    <div class="window-content">
      <div class="pane-group">
        <sidebar-page-view :custList="custList"></sidebar-page-view>
        <div class="pane">
          <topbar-header-view :custMenu="custMenu"></topbar-header-view>
          <window-pane-view :content="content"></window-pane-view>
          <div class="toolbar toolbar-footer">
          </div>
        </div>
      </div>
    </div>
  </div> <!-- Window Content Ends -->

对战：

<template>
  <div class="window">
    <div class="window-content">
      <div class="pane-group">
        <sidebar-page-view :custList="custList"></sidebar-page-view>
        <div class="pane">
</template>

<template>
          <topbar-header-view :custMenu="custMenu"></topbar-header-view>
          <window-pane-view :content="content"></window-pane-view>
</template>

<template>
          <window-pane-view :content="content"></window-pane-view>
          <div class="toolbar toolbar-footer">
          </div>
        </div>
      </div>
    </div>
  </div> <!-- Window Content Ends -->
 </template>

数据对象：

CustomerList A-CustomerA Menu 1-Content 1
                               -Content 2
              -CustomerA Menu 2
              -CustomerA Menu 3 -Content 1
                                -Content 2
CustomerLust B-
              ...

它本质上是分层次的，所以道具流程会更有意义，只有方法功能可以启动，而只有一个级别层次结构为

I have now   _sidebar (custList)   it has to be initiated with eventBus or vuex
            |    
      Main--|-topbar (custMenu)
            |_
              windowPane (content)

在Vue.js模板中使用Eventbus或Props Dilemma

0 个答案: