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

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

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

工作示例

＆＃13;

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,
	}
});

＆＃13;

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

＆＃13;

使用<first-layer>标记意味着它将被模板替换为什么你放入其中将丢失，为了paas一些参数我们可以绑定像<first-layer :name='name'>这就是为什么你的例子不使用嵌套标签

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

2 个答案: