Riot.js：在不同的父标签中重用子标签名称

Question

我正在开展一个小型的ui项目。所以我开发了'form-accordion＆＃39;以下列方式使用的标记：

<form-accordion>
    <panel label='panel 1'>
    ...
    </panel>
    <panel label='panel 2'>
    ...
    </panel>
</form-accordion>

现在我想定义另一个标签＆＃39; form-tabs＆＃39;我希望以下列方式使用：

<form-tabs>
    <panel label='panel 1'>
    ...
    </panel>
    <panel label='panel 2'>
    ...
    </panel>
</form-tabs>

我的问题是：如何定义两个不同的标签＆＃39; panel＆＃39;这将在不同的父标签下呈现不同的方式。

Answer 1

我认为有不同的方法可以做到这一点，但基本上你会在你的子标签中定义一个脚本，并且该脚本会收到一些指示更改的内容，之后，panel.tag的脚本将处理你的内容。编写该代码的一种方法：

file：panel.tag

<panel>
  <div>
    Your HTML here
  </div>
  
  <script>
    this.on('mount', function(){
      //write your code to handle content here
      if(opts.type == 1)
      {
         // do something
      }
      else if(opts.type == 2)
      {
         // do something else
      }
    });
  </script>

  <style>
    /* CSS class of that tag */
  </style>
</panel>

因此，当您拨打该标记时，您会发送一些内容来更改您的内容，例如属性：

file：form-accordion.tag

<form-accordion>
  <panel type="1">
  </panel>
</form-accordion>

file：form-tabs.tag

<form-tabs>
  <panel type="2">
  </panel>
</form-tabs>

另一种方法是使用更好的防暴功能，如：

file：panel.tag

<panel>
  <div>
     <div if={opts.type == 1}>
       Panel 1
     </div>
     <div if={opts.type == 2}>
       Panel 2
     </div>
  </div>
  
  <script>
    // 
  </script>

  <style>
    /* CSS class of that tag */
  </style>
</panel>

修改

我再次阅读您的问题，也许简单的方法更符合您的需求，代码只需在panel.tag的HTML上写下您的标签：

file：panel.tag

<panel>
  <div>
     { opts.label }
  </div>
</panel>

Answer 2

嘿我认为要优化您的代码，而不是多次调用面板代码（取决于您想要查看的面板代码的数量），您可以使用riot的each关键字创建一个简单的循环来创建您要使用的面板数量...如下所示form-accordion＆amp; form-tabs个标签。我们可以将循环中的panelNum作为标记opts数组的一部分传递给您调用{arm} {/ 1}}

label

然后，在着名的<form-accordion> <div each={panelNum in NumOfPanelsNeeded}> <panel label={panelNum}> ... </panel> </div> </form-accordion> <form-tabs> <div each={panelNum in NumOfPanelsNeeded}> <panel label={panelNum}> ... </panel> </div> </form-tabs> 标记内，我们可以从panel数组中检索此label arg，然后最终将其显示在标记html中。

opts

简单就是这样！ ;） 如果您需要帮助找出如何在javascript中将子事件添加到父级的事件处理程序，请告诉我。