Skip to content

# Props ​

## The `props` object ​

Native to web components and any other element, we can pass attributes to our elements:

tsx

    <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:

tsx

    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 in attributes ​

Web components only allow primitive types like strings and numbers as attributes. `vanille` allows us to pass object:

tsx

    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:

tsx

    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>
        )
      }
    }

## Atttributes are observable props ​

Covered in detail in the Observables section, its possible to listen to prop changes at any given level:

tsx

    export class App extends BaseView {
      setBindings() {
        this.props.$on('user', (newValue: User) => {
          // user changed
        });
        this.props.user.$on('name', (newValue: string) => {
          // name changed
        });
      }
    }

    export class App extends BaseView {
      setBindings() {
        this.props.$on('user', (newValue: User) => {
          // user changed
        });
        this.props.user.$on('name', (newValue: string) => {
          // name changed
        });
      }
    }