"Subclass" Riot.js template/custom 元素？

Question

对于Riot.js，是否有任何自定义元素继承的规定？

作为一个简单的例子，假设我有一个自定义元素 <custom-button>。像这样：

<custom-button>
  <button>{innerContent}</button>
</custom-button>

现在，也许我想子class这个按钮作为一个新的自定义元素，也许包含一个图标：

<custom-button-with-icon>
  <inner-content>
    {icon} {text}
  </inner-content>
  <script>
    this.extends('custom-button');
  </script>
</custom-button-with-icon>

在 Riot.js 中是否有类似的东西允许我覆盖外部模板的一部分，或者以其他方式子class 自定义元素？

Answer 1

如果您正在使用 Riot.js v4，对于 template/custom 组件的子类化，您可以使用 Riot.js 的插槽功能。您使用插槽字段创建组件

<custom-button>
  <button>
   <slot/>
  </button>
</custom-button>

然后您可以创建另一个使用自定义按钮的组件

<custom-button-with-icon>
  <custom-button>
    {icon} {text}
  </custom-button>
</custom-button-with-icon>

然后当使用带有图标的自定义按钮组件时，插槽将被替换为 {icon} {text}。更多信息在这里：https://riot.js.org/api/#slots

"Subclass" Riot.js template/custom 元素？

"Subclass" a Riot.js template/custom element?

riot.js