Bindings
Component scopes
Components that introduce names for their children.
A manifest entry can declare scope: names its children can bind to. The binding plugin's ::for uses it for its loop variable:
{
name: 'for',
kind: 'block',
props: { each: { type: 'array' }, item: { type: 'string', default: 'item' }, index: { type: 'string' } },
scope: [
{ name: 'item', nameProp: 'item', source: 'each', element: true },
{ name: 'index', nameProp: 'index' },
],
}
::for{:each="data.posts" item="post"}
- {{ post.title }}
::
Inside, post is offered as a root, and post. completes the fields of an element of data.posts.
| Field | Meaning |
|---|---|
name | default name |
nameProp | prop that renames it (item="post") |
source | prop whose (bound) value is the data path it refers to |
element | it is one element of the list at source |
Plugins can add roots too, with scopes (see Authoring).