Vue JS嵌套列表：将道具传递给子代以及子代子代

Question

我正在尝试使用Vue.js 2.x创建3个层次的嵌套列表。我将道具从外部列表传递到中间列表，再从那里传递到内部列表。

但是，仅外部列表呈现。没有引发任何错误。内部列表似乎未接收到任何数据。

我的代码Js fiddle的小提琴

标记

 <div id="app">
  <ul>
    <outer-item v-for="item in items" v-bind:item="item">
      <ul>
        <mid-item v-for="mid in item.mids" v-bind:mid="mid">
          <ul>
            <inside-item v-for="inside in mid.insides" 
               v-bind:inside="inside"></inside-item>
          </ul>
        </mid-item>
      </ul>
    </outer-item>
  </ul>
</div>

JavaScript

 Vue.component('outer-item', {
  props: ['item'],
  template: '<li>{{item.text}}</li>'
})
Vue.component('mid-item', {
  props: ['mid'],
  template: '<li>{{mid.text}}</li>'
})
Vue.component('inside-item', {
  props: ['inside'],
  template: '<li>{{inside.text}}</li>'
})

var app = new Vue({
  el: '#app',
  data: function () {
    return {
      items: [{
          text: 'Outer A',
          mids: [{
            text: 'Mid A',
            insides: [{
              text: 'Inside A'
            }, {
              text: 'Inside B'
            }]
          }, {
            text: 'Mid B',
            insides: [{
              text: 'Inside C'
            }, {
              text: 'Inside D'
            }]
          }]
        },
      ]
    }
  }
})

Answer 1

问题很简单：您拥有全部以li作为模板的组件。现在您正在尝试将其他组件绑定到这些li中-我认为这没有意义。 ：）

解决方法：更改模板以使用Vue's <slot></slot>并添加文本输出：

// Do this for all other components
Vue.component('outer-item', {
  props: ['item'],
  template: '<div><li>{{item.text}}</li><slot></slot></div>'
})