如何使用riot js将变量传递给子标签

How to pass variable to child tag using riot js

本文关键字：标签 变量 何使用 riot js      更新时间：2023-09-26

我对riot js没有太多经验。我创建的标签层次结构像

<tag-1>
    <tag-2>
        <tag-3>
        </tag-3>
    </tag-2>
</tag-1>

现在我需要将变量(包含JSON)传递给"tag-3"，并且在该变量的每次更新中，我如何更新"tag-3"。现在我正在安装"tag-3"，比如

riot.mount('tag-3', { comm: "Hello" });

其中comm为变量，tag-3中挂载变量comm不可访问后显示未定义。另一件事，每个标签html是在一个单独的"。标签"，在这个标签中我调用另一个标签，比如"标签-1"。标签文件"标签-2"在"标签-2"中被调用。标签"文件我叫"标签-3"，在"标签-2 "。标签" file I am mount " Tag -3"

  1. 你不需要在其他暴乱标签中安装标签-只需要安装根标签。这就是为什么你的comm参数不能进入tag-3。

  2. 在一个.tag文件中可以有多个标签定义。标签文件编译完成后，里面的riot标签是否从多个标签文件中加载并不重要

  3. 您可以将变量作为标签属性传递-它们将在opts变量下可用。

把这些放在一起，你的单个标签文件看起来像这样: 
<tag-1>
  <p>This is my TAG1</p>
  <tag-2 comm="{ commValue}"></tag-2>
  <script>
    this.commValue = { text: 'My text' }
  </script>
</tag-1>
<tag-2>
  <p>This is my TAG2 with comm: { opts.comm.text }</p>
  <script>
    this.on('update', function () {
      // you can use 'opts.comm' here
    });
  </script>
</tag-2>

听起来好像comm的值会随着时间的推移而不断变化。如果这是真的，你最好的选择是在现有标签之间发送消息的riot.observable()机制。

  1. 引起值变化的任何标签都将"触发"您选择的消息-可能是'value_changed'。

    riot.observable().trigger('value_changed', {comm: newValueOfComm})

  2. 你的标签-3将"监听"消息"value_changed"，并根据它做一些事情。

    riot.observable().on('value_changed', function(data) { console.log("new value=" + data.comm); })

有关工作示例，请查看"机制2":http://vinapps.com/riot-cookbook-app//页面/页的

参考页在这里:http://riotjs.com/api/observable/

在Riot版本4及更高版本中，您只需使用该属性来传递您想要的任何内容-无论是整个JS对象，原始元素还是基本字符串。

传递的属性可以在子组件中访问，如this.props.

<parent-component>
  <inner-component data={state.thingToPass} />
</parent-component>

如果你想让子组件/内部组件对其属性的变化做出响应——这不是自动的——你应该覆盖子组件的onUpdated(props,state)方法，检查道具的变化，并根据你的意愿做出反应。

当然，你也可以用其他方式来实现，比如传递可观察对象和类似的策略，以及传递API对象等，但通常，在大多数情况下，上面的方法是最简单的。

相关文章：