Vue - 嵌套组件而不分离成单个页面

Question

我是 Vue 的新手，并尝试了解组件结构在 Vue 中的工作原理。
下面是我在 codepen 中的代码。
Nesting Components

<div id="todolist">
    <first-layer>
        <second-layer></second-layer>
    </first-layer>
</div>

<script>
var secondLayer = Vue.extend({
  template: '<div>i am second layer.</div>'
});

var firstLayer = Vue.extend({
  template: '<div>I am first layer.</div>',
  components: secondLayer,
});

var todolist = new Vue({
    el: "#todolist",
    components: {
        'first-layer': firstLayer,
    }
});
<script>

我尝试做的是通过声明一个对象然后在 components 属性中调用它来将组件与其父组件分开。 它在第一层起作用。 但是，当我尝试用相同的动作在组件中做同样的事情（比如嵌套它们）时，第二层没有按预期显示。这是为什么呢？

以及在没有 .vue 文件 sep 的情况下处理这些的推荐结构是什么

Answer 1

发生这种情况是因为 Vue 使用组件的模板覆盖了您放入 <first-layer> 的任何模板。

为了防止它，你可以使用slots:

var firstLayer = Vue.extend({
  template: '<div>I am first layer1.<slot></slot></div>'
});

现在你放在<first-layer>标签之间的所有内容都会进入这个槽。

如果你想要一个更复杂的不同插槽的组件，你可以使用named slots

Answer 2

在first-layer模板中使用second-layer作为

template: '<div>I am first layer1.<div><second-layer></second-layer></div></div>',

工作示例

var secondLayer = Vue.extend({
  template: '<div>i am second layer2.</div>'
});

var firstLayer = Vue.extend({
  template: '<div>I am first layer1.<div><second-layer></second-layer></div></div>',
  components: {
		'second-layer': secondLayer,
	}
});

var todolist = new Vue({
	el: "#todolist",
	components: {
		'first-layer': firstLayer,
	}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.6/vue.js"></script>
		<div id="todolist">
			<first-layer>
			</first-layer>
		</div>

使用<first-layer> 标记意味着它将被模板替换，您在其中放置的任何内容都会丢失，我们可以像<first-layer :name='name'> 那样绑定一些参数，这就是为什么您的示例无法使用嵌套标记