Vue.js Vue JS嵌套列表：将道具传递给子级和子级的子级

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

但是，只有外部列表呈现。不会抛出任何错误。内部列表似乎没有收到任何数据

我的代码乱七八糟 加成

JavaScript

Vue.component（'outer-item'{
道具：['item']，
模板：“
{{item.text}
”
})
Vue.组件（“中间项目”{
道具：['mid']，
模板：“
{{mid.text}
”
})
Vue.组件（'内部项目'{
道具：[“内部”]，
模板：“
{{inside.text}
”
})
var app=新的Vue({
el:“#应用程序”，
数据：函数（）{
返回{
项目：[{
文本：“外部A”，
中期：[{
文本：“中间A”，
内部：[{
文字：“在A内”
}, {
文字：“B内”
}]
}, {
文本：“中间B”，
内部：[{
文本：“C内”
}, {
文本：“内部D”
}]
}]
},
]
}
}
})

问题很简单：您的组件都有

li

s作为模板。现在您正试图将其他组件绑定到这些

li

s中-我认为这没有意义。：）

修复方法：更改模板以使用并添加文本输出：

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

//对所有其他组件执行此操作
Vue.组件（“外部项目”{
道具：['item']，
模板：“
{{item.text}
”
})

问题很简单：您的组件都有

li

s作为模板。现在您正试图将其他组件绑定到这些

li

s中-我认为这没有意义。：）

修复方法：更改模板以使用并添加文本输出：

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

//对所有其他组件执行此操作
Vue.组件（“外部项目”{
道具：['item']，
模板：“
{{item.text}
”
})

这很有效。我没有添加您在解决方案中显示的div元素。更新的工作小提琴：这是有效的。我没有添加您在解决方案中显示的div元素。更新的工作小提琴：

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