Parent-Child Props

Pass data from parent to child components using data-prop attributes.

Live Demo

from the child component!

This child receives message and color as props from the parent.

Source

HTML + JavaScript 
<!-- Parent component -->
<div data-component="parent">
    <input data-model="greeting">
    <select data-model="accentColor">
        <option value="#6b996a">Green</option>
        <option value="#3498db">Blue</option>
    </select>

    <!-- Child receives props bound to parent state -->
    <div data-component="child"
         data-props="{ message: greeting, color: accentColor }">
        <p data-bind-style="accentStyle">
            <strong data-bind="props.message"></strong> from child!
        </p>
    </div>
</div>

<script>
wildflower.component('parent', {
    state: { greeting: 'Hello', accentColor: '#6b996a' }
});

wildflower.component('child', {
    props: {
        message: { default: '' },
        color: { default: '#999' }
    },
    computed: {
        accentStyle() { return { color: this.props.color }; }
    }
});
</script>

Key Points

  • data-props="{ message: greeting, color: accentColor }" passes multiple props in one attribute, with values resolving from parent state
  • Props are reactive. When the parent state changes, the child re-renders automatically
  • Access props in templates with data-bind="props.propName" or in JS with this.props.propName
  • Style expressions that use props need a computed property (e.g., accentStyle) since data-bind-style can't resolve props.color directly

Related documentation

Props →