Props
The props
object
Native to web components and any other element, we can pass attributes to our elements:
<v-app firstName="{user.name}"></v-app>
<v-app firstName="{user.name}"></v-app>
Then, we can now access any given prop with the props
object:
export class App extends BaseView {
render() {
return (
<div>{this.props.firstName}</div>
)
}
}
export class App extends BaseView {
render() {
return (
<div>{this.props.firstName}</div>
)
}
}
Objects as attributes
Web components only allow primitive types like strings and numbers as attributes. vanille
allows us to pass object:
const user: User = { name: 'vanille' };
<v-app user="{user}"></v-app>;
const user: User = { name: 'vanille' };
<v-app user="{user}"></v-app>;
Again using props
to access the object:
export class App extends BaseView {
render() {
return (
<div>{this.props.user.name}</div>
)
}
}
export class App extends BaseView {
render() {
return (
<div>{this.props.user.name}</div>
)
}
}
Signals as attributes
Covered in detail in the Signals section, its possible to listen to prop changes at any given level:
Declare a signal as a property and assign it to the child's attributte:
export class Parent extends BaseView {
count = state(0);
render() {
return (
<Child count={count} />
);
}
}
export class Parent extends BaseView {
count = state(0);
render() {
return (
<Child count={count} />
);
}
}
Using the given props as this.props.count
:
export class Child extends BaseView {
render() {
return (
<div>{this.props.count}</div>
);
}
}
export class Child extends BaseView {
render() {
return (
<div>{this.props.count}</div>
);
}
}
When the signal changes at any hierarchy, any component using it will have its value reactively updated in the DOM. Let's increment the count in the parent component:
export class Parent extends BaseView {
count = state(0);
render() {
return (
<button onclick={() => this.count.set((c) => c + 1)}>
Increment
</button>
<Child count={count} />
);
}
}
export class Parent extends BaseView {
count = state(0);
render() {
return (
<button onclick={() => this.count.set((c) => c + 1)}>
Increment
</button>
<Child count={count} />
);
}
}
vanille
will only update the specific places in the DOM where the signal is being used
export class Child extends BaseView {
render() {
return (
<div>{this.props.count}</div> // count is updated!
);
}
}
export class Child extends BaseView {
render() {
return (
<div>{this.props.count}</div> // count is updated!
);
}
}