Riot.js: mounting tags with same variable - riot.js

Question

I have 3 customs tags: my-tag1, my-tag2 and my-tag3
And I am using them like this:
<my-tag1>
<my-tag2 attr1="a">
<my-tag3 attr2="b"></my-tag3>
</my-tag2>
</my-tag1>
I am mounting all tags like this:
riot.mount('*', { store:reduxStore });
my-tag1 can access to store but my-tag2and my-tag3 can not do it.
However, if I do the following, my-tag2 can use store:
<my-tag1>
<my-tag2 attr1="a" store={opts.store}>
<my-tag3 attr2="b"></my-tag3>
</my-tag2>
</my-tag1>
Why? I have to do that in all my tags?

Answer 1

riot.mount('*') mounts all top-level tags. The top-level tags take care of mounting their sub-tags respectively
If you want to pass a store, I think it is best to use mixins. See http://riotjs.com/guide/#mixins
Cheers!

Answer 2

When tags are nested, a new context is created
for a child tag. In the new context, all the parent's properties
inherited are set to undefined.
References:
https://github.com/riot/riot/issues/1720
http://riotjs.com/guide/#context
In your example, by adding store={opts.store} in my-tag2, you are
defining an option store in my-tag2's new context. If you don't do
that, the option store in my-tag2's context is inherited from
my-tag1, but it is set to undefined (so my-tag2 sees undefined for
the store's value).
In order to share the store's value across my-tag1, my-tag2, and my-tag3,
there are two ways in my opinion:
1) my-tag3 initializes store's value to my-tag2'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 initializes store's value to my-tag1's store using the
parent variable.
<my-tag1>
<my-tag2 attr1="a" store={opts.store}>
<my-tag3 attr2="b" store={parent.opts.store}></my-tag3>
</my-tag2>
</my-tag1>