Nested components

Let’s define a parent tag <account> and with a nested tag <subscription>:

  1. <account>
  2.   <subscription plan={ props.plan } show-details={ true } />
  3. </account>
  1. <subscription>
  2.   <h3>{ props.plan.name }</h3>
  4.   <script>
  5.     export default {
  6.       onMounted(props) {
  7.         // Get JS handle to props
  8.         const {plan, showDetails} = props
  9.       }
  10.     }
  11.   </script>
  12. </subscription>

Note how we named the show-details attribute, it is written in dash case but it will be converted to camel case inside the this.props object.

Then we mount the account component to the page with a plan configuration object:

  1. <body>
  2.   <account></account>
  3. </body>
  5. <script>
  6.   riot.mount('account', { plan: { name: 'small', term: 'monthly' } })
  7. </script>

Parent component properties are passed with the riot.mount method and child component ones are passed via the tag attribute.

Nested tags should be registered via riot.register call or they can be directly imported into the parent component. If you bundle your application your <account> template might look like this:

  1. <account>
  2.   <subscription/>
  4.   <script>
  5.     import Subscription from './subscription.riot'
  7.     export default {
  8.       components: {
  9.         Subscription
  10.       }
  11.     }
  12.   </script>
  13. </account>

Slots

Using the <slot> tag you can inject custom HTML templates in a child component from its parent

Child component definition

  1. <greeting>
  2.   <p>Hello <slot/></p>
  3. </greeting>

The child component is placed in a parent component injecting custom HTML into it

  1. <user>
  2.   <greeting>
  3.     <b>{ text }</b>
  4.   </greeting>
  6.   <script>
  7.     export default {
  8.       text: 'world'
  9.     }
  10.   </script>
  11. </user>

Result

  1. <user>
  2.   <greeting>
  3.     <p>Hello <b>world</b><p>
  4.   </greeting>
  5. </user>

See API docs for slots.

Slots work only in compiled components, all the inner HTML of the components placed directly in your page DOM will be ignored.

:warning: Riot if, each and is directives are not supported on slot tags