Partials 应该支持后备内容——就像插槽一样。 当以特定方式使用模板时,这将大大提高模板的可读性:
有一个具有某些逻辑(例如对话框)的基础组件,需要从中派生出共享相同逻辑和(外部)模板的其他组件(例如 PromptDialog)。 这是通过使用类似于使用插槽的部分来实现的 - 但基于组件而不是实例。
这样的模板看起来像这样:
<div>
<div class="header">
<partial name="header">
<i class="fa-whatever"></i>
{{title}}
</partial>
</div>
<div class="body">
<partial name="body">
{{{body}}}
</partial>
</div>
<div class="footer">
<partial name="footer">
<!-- some stuff for button rendering -->
</partial>
</div>
</div>
如果没有此功能,我需要将所有部分节点的内容放在模板之外 - 嵌套部分会变得更糟。
通过在派生模板中使用基本组件来解决问题 - 因此嵌套实例是不切实际的,因为我需要将大部分数据/道具和 API 从外部(伪派生)重定向到内部(基础)实例。
抱歉,我不明白为什么使用插槽而不是部分不是一种选择:sweat_smile:
有什么原因吗?
使用插槽时,伪派生的 _PromptDialog_ 将具有以下模板。
<dialog
:foo.sync="foo"
>
<input
v-model="thePromptedValue"
slot="body"
>
</dialog>
对于原始 _Dialog_ 组件上的每个属性 _foo_,我需要在外部 _PromptDialog_ 上具有相同的属性并将其传递给内部。 _Dialog_ 上定义的所有方法也是如此:我需要定义将调用传递给内部的代理。 这很麻烦并且破坏了组件扩展/类继承背后的想法。
我会说这是滥用部分。 这样做是一个坏主意,因为您的部分片段来自父级,同时了解子级的数据上下文。 这是紧解耦。
对话框组件不应该拥有任何自己的状态,因为它纯粹是展示性的。 不要传递状态。 状态和显示的内容都应该属于使用对话框的父组件。
最有用的评论
我会说这是滥用部分。 这样做是一个坏主意,因为您的部分片段来自父级,同时了解子级的数据上下文。 这是紧解耦。
对话框组件不应该拥有任何自己的状态,因为它纯粹是展示性的。 不要传递状态。 状态和显示的内容都应该属于使用对话框的父组件。