implement event based registration as mixin

[matsp]

Avoid direct child access via $children.

Parent components should only listen for specific IDs.

e.g.

• FormField <-> Checkbox

[tychenjiajun]

I'm planning on adding a function emit in baseComponentMixin like the following

function emit (target: Element, eventType: string, payload) { /* ... */ }

and change the mounted hook in every component

<div @initialized="onInit"></div> <!-- some material component here -->

mounted () {
    this.mdcComponent = MDCComponent.attachTo(this.$el) // initialize itself and may cause some DOM and style change
    this.$nextTick(() => { // use nextTick because we have to wait for the DOM change  
        this.emit(this.mdcComponent.someChild_.root_, 'initialized', this.mdcComponent.someChild_) // useful for components that initialize their children like drawer, text-field and tab bar
        this.emit(this.$slots.default.$el, 'form-initialized', this.mdcFormField) // useful for form field
    })
},
methods: {
    onInit (component) {
         this.mdcComponent = component 
    },
    onFormInit (formFieldComponent) { /* ... */ }
}

[tychenjiajun]

Use provide/inject together with event is also a solution