如何使用using将变量传递给子标记

Question

我在防暴方面没那么多经验。我创建的标签层次结构如下

<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“是变量，在挂载变量"comm”之后，标签" tag -3“中不能访问”comm“，则显示未定义。另一件事是，每个标记html都位于一个单独的".tag“中，使用的标记是我正在调用的其他标记，例如在”tag -1“标记文件" tag -2”中，在“tag -2 tag”文件中，我称之为"tag-3"，而在“tag-2 tag”文件中，我正在挂载"tag-3“。

我怎么能这么做？

Answer 1

1. 您不需要在其他防暴标签中挂载标签--只需要挂载根标签。这就是为什么您的comm参数不能将它输入到tag-3中。
2. 在一个.tag文件中可以有多个标记定义。在编译标签文件之后，是否从多个标签文件加载防暴标签并不重要。
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>

Answer 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”at：http://vinapps.com/riot-cookbook-app/#/pages/between-page。

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

Answer 3

在Riot 4和更高版本中，您只需使用该属性传递所需的任何内容--一个完整的JS对象、一个原语或一个基本字符串。

传递的属性可以作为this.props在子组件中访问。

<parent-component>

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

如果您希望子组件/内部组件响应其属性中的更改--这不是自动的--您应该重写子组件的onUpdated(props,state)方法，检查道具中的更改，并根据您的意愿做出反应。

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