Question

我有3个海关标签：my-tag1，my-tag2和my-tag3

我正在使用它们：

<my-tag1>
  <my-tag2 attr1="a">
    <my-tag3 attr2="b"></my-tag3>
  </my-tag2>
</my-tag1>

我正在安装所有标签：

riot.mount('*', { store:reduxStore });

my-tag1可以访问store但my-tag2和my-tag3无法访问。

但是，如果我执行以下操作，my-tag2可以使用store：

<my-tag1>
  <my-tag2 attr1="a" store={opts.store}>
    <my-tag3 attr2="b"></my-tag3>
  </my-tag2>
</my-tag1>

为什么呢？我必须在我的所有标签中都这样做吗？

Answer 1

riot.mount('*')安装所有顶级代码。顶级标签分别负责安装子标签如果你想通过商店，我认为最好使用mixins。见http://riotjs.com/guide/#mixins

干杯！

Answer 2

嵌套标签时，会创建新的上下文为儿童标签。在新的上下文中，所有父级的属性 inherited设置为undefined。

参考文献：

在您的示例中，您可以在store={opts.store}中添加my-tag2 在store的新上下文中定义选项my-tag2。如果你不这样做那个，store上下文中的选项my-tag2是继承的 my-tag1，但设置为undefined（因此my-tag2看到undefined store的价值）。

要在store，my-tag1和my-tag2之间分享my-tag3的值，我认为有两种方式：

1）my-tag3将store的值初始化为my-tag2＆＃39; s store

<my-tag1>
  <my-tag2 attr1="a" store={opts.store}>
    <my-tag3 attr2="b" store={opts.store}></my-tag3>
  </my-tag2>
</my-tag1>

2）my-tag3将store的值初始化为my-tag1＆＃39; s store parent变量。

<my-tag1>
  <my-tag2 attr1="a" store={opts.store}>
    <my-tag3 attr2="b" store={parent.opts.store}></my-tag3>
  </my-tag2>
</my-tag1>

Riot.js：用相同的变量挂载标签

2 个答案: