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

Posted 2023-02-23

【中文标题】Vue - 嵌套组件而不分离成单个页面

【英文标题】：Vue - Nesting components without separating into single page

【发布时间】：2018-05-03 11:32:00

【问题描述】：

我是 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 的情况下处理这些的推荐结构是什么

【参考方案1】：

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

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

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

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

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

【讨论】：

就是这样！谢谢兄弟！

【参考方案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'> 那样绑定一些参数，这就是为什么您的示例无法使用嵌套标记

【讨论】：

谢谢！我想我明白你的意思，但是使用这种方式似乎我只能从 js 代码生成内部组件（这里说第二层）对吧？