Nested Components Using Vnode Children

27 October 2021 by tbreuss

Level: beginner • Mithril.js Version: latest

component m.mount nested vnode

This is an example showing nested components using vnode.children.

Live Example #

JavaScript #

const Child = {
  view: function(vnode) {
    return m('div',
      m('h3', vnode.attrs.title),
      m('p', vnode.attrs.text)
    );
  }
};

const Parent = {
  view: function(vnode) {
    return m('div', [
      m('h2', 'Parent Title'),
      vnode.children
    ]);
  }
};

const App = {
  view: function() {
    return m(Parent, [
      m(Child, { title: 'Child Title 1', text: 'Text Number 1' }),
      m(Child, { title: 'Child Title 2', text: 'Text Number 2' }),
      m(Child, { title: 'Child Title 3', text: 'Text Number 3' })
    ]);
  }
}

m.mount(document.body, App);

CSS #

@import "https://unpkg.com/water.css@2/out/water.min.css";

The snippet is using the most current version of Mithril.js framework. It is aimed at beginners and shows some basic recipes.

In addition to the Mithril.js hyperscript function m(), here we can see an example of Mithril.js' m.mount API method. In this example we can also see the usecase of Vnodes (virtual DOM nodes) which is a JavaScript data structure that describes a DOM tree.

The example was contributed by tbreuss and last modified on 27 October 2021. Click here to see more examples contributed by the author.

Contribute #

If anyone has some improvements, that should be addressed, let me know by opening an issue. Or simply fork the repository on GitHub, push your commits and send a pull request. For starting your work, you can click the edit link below. Thanks for contributing.

See more code examples  •  Edit this example on GitHub