"Subclass“a Riot.js模板/自定义元素？

Question

对于Riot.js，有没有提供自定义元素继承的规定？

举个简单的例子，假设我有一个自定义元素<custom-button>。如下所示：

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

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

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

在Riot.js中有没有类似这样的东西，允许我覆盖外部模板的一部分，或者是自定义元素的子类？

Answer 1

如果您使用的是Riot.js v4，则可以使用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