Vue: 功能:部分的后备内容

创建于 2016-04-11  ·  3评论  ·  资料来源: vuejs/vue

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 从外部(伪派生)重定向到内部(基础)实例。

最有用的评论

我会说这是滥用部分。 这样做是一个坏主意,因为您的部分片段来自父级,同时了解子级的数据上下文。 这是紧解耦。

对话框组件不应该拥有任何自己的状态,因为它纯粹是展示性的。 不要传递状态。 状态和显示的内容都应该属于使用对话框的父组件。

所有3条评论

抱歉,我不明白为什么使用插槽而不是部分不是一种选择:sweat_smile:
有什么原因吗?

使用插槽时,伪派生的 _PromptDialog_ 将具有以下模板。

<dialog
  :foo.sync="foo"
  >
  <input
    v-model="thePromptedValue"
    slot="body"
    >
</dialog>

对于原始 _Dialog_ 组件上的每个属性 _foo_,我需要在外部 _PromptDialog_ 上具有相同的属性并将其传递给内部。 _Dialog_ 上定义的所有方法也是如此:我需要定义将调用传递给内部的代理。 这很麻烦并且破坏了组件扩展/类继承背后的想法。

我会说这是滥用部分。 这样做是一个坏主意,因为您的部分片段来自父级,同时了解子级的数据上下文。 这是紧解耦。

对话框组件不应该拥有任何自己的状态,因为它纯粹是展示性的。 不要传递状态。 状态和显示的内容都应该属于使用对话框的父组件。

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

paceband picture paceband  ·  3评论

gkiely picture gkiely  ·  3评论

robertleeplummerjr picture robertleeplummerjr  ·  3评论

aviggngyv picture aviggngyv  ·  3评论

finico picture finico  ·  3评论