Vue.js 中的嵌套组件答案

【问题标题】：Nested components in Vue.jsVue.js 中的嵌套组件
【发布时间】：2015-11-22 03:35:12
【问题描述】：

我很难创建每个层都包含模板的嵌套组件：

<wizard>
    <step name="first">Do this step first!</step>
    <step name="second">This should follow</step>
</wizard>

我只让模板为父组件或为子组件工作，从不为两者工作。

如果父组件没有模板并且与<... inline-template> 一起使用，则评估子组件（及其模板）（就像在http://jsfiddle.net/hajkrupo/3/ 中一样）
如果父组件包含模板（即使带有特殊标签 <content>），则子组件不会被插入/评估

vue.js 可以解决这个问题吗？

【问题讨论】：

我相信这是你的问题http://vuejs.org/guide/components.html#Content_Insertion：“转入的内容是在父组件的范围内编译的，而不是在子组件的范围内”。

【解决方案1】：

如果您使用最新的 vue.js 版本（撰写本文时为 1.0.26），您的问题是使用 <content></content>，因为语法已更改为 <slot></slot>

【讨论】：

【解决方案2】：

没有。 inline-template 表示您在那里定义内联模板：

当此参数存在时，组件将使用其内部内容作为其模板，而不是嵌入内容。这允许更灵活的模板创作。

【讨论】：