Child-to-Parent Messaging Edit

San components provide event mechanism. By calling fire method child component can dispatch a custom event, which will be received by the parent component via the on-“event name” directive or on method on the child component instance. That is child-to-parent component messaging.

Usage

var childComponent = san.defineComponent({    
    template: `
        <div>
            <button on-click="onClick">change</button>
        </div>
    `,
    
    onClick: function () {
        // Dispatch a child-change event
        this.fire('child-change', 'from child');
    }
});

var parentComponent = san.defineComponent({
    components: {
      'my-child': 'childComponent'
    },
  
    template: `
        <div>
            <my-child on-child-change="changeHandler($event)"/>
        </div>
    `,
  
    changeHandler: function (val) {
        // event handling
    }

});

Note: Two-way data binding can also achieve child-to-parent messaging. But it’s not recommended to notify the parent component using two-way data binding other than use cases like form components.

Demo

See the Pen child-to-parent by funa (@naatgit) on CodePen.