Component page is also compiled with Template7 or ES Template, but it has much more functionality. In addition to Template7 page it has lifecycle hooks, events handling, data managment and Virtual DOM data bindings.
It is useful to use Component page when you need page-specific logic.
Hello! My name is {{name}}. I am {{age}} years old.
I like to play:
-
{{#each like}}
- {{this}} {{/each}}
Context can be passed in route options
- foo: {{foo}}
Component page context as Template7 page context is also extended with some additional variables.
$route
Contains properties of the current route:
- $route.url: {{$route.url}}
- $route.path: {{$route.path}}
- $route.params: {{js 'return JSON.stringify(this.$route.params)'}}
- $route.hash: {{$route.hash}}
- $route.query: {{js 'return JSON.stringify(this.$route.query)'}}
- $route.context: {{js 'return JSON.stringify(this.$route.context)'}}
$root
Root data & methods:
- $root.user.firstName: {{$root.user.firstName}}
- $root.user.lastName: {{$root.user.lastName}}
- $root.helloWorld()
$theme
Currently active theme:
- $theme.ios: {{$theme.ios}}
- $theme.md: {{$theme.md}}
Component page is rendered using Virtual DOM. It means it can automatically update page layout depending on changed state with minimal efforts and with maxumim performance.
Ok, so your name is {{name}}?
Button clicked {{clickCounter}} times
-
{{#each listItems}}
- Item {{this}} {{/each}}