Programtically creating component instances: event bubbling?

[Bartvds]

I'm trying to use constructors from Vue.extend() to create instances in code, and add them manually to existing vm's instead of directives or tags.

My problem: the event system doesn't connect: events from $dispatch() never reach top element ($root/$parent are not set right it seems).

I looked at the docs and assembled this snippet to add an instance from code:

var ButtonB = Vue.extend(...)
var b = new ButtonB();
b.$mount();
b.$appendTo(app.$el);
app.$addChild(b);

Is this even right?

I made a simplified fiddle: http://jsfiddle.net/znqyezzu/ : two identical button components are placed: A as tag, B from code. A's events bubble but B's don't. What did I miss?

[multimeric]

As I say to everyone I'm still not sure I've ever seen a situation where you should use the imperative API rather than using directives. But anyway the reason your code isn't working is because $addChild() actually takes a constructor function and uses it to create a component, it doesn't take an already created component. Check the API reference here. So your code should be like this:

var a = app.$addChild({}, ButtonB);
a.$mount();
a.$appendTo(app.$el);

Here's a fiddle with the full code: http://jsfiddle.net/znqyezzu/1/

[Bartvds]

Thanks for the response, works perfectly!

The use-case why I'd like to use imperative style to add the instances to the app is I use Webpack's async bundle splitter/loader (via require.ensure) to split my app into different bundles, and I needed a neat way to add new instances to the app.

The main sections are all Vue components in their own file, require()-ing their style and templates (and also sub components). Webpack then makes sure this all gets split and bundled over many files and does some magic with the async loading.

Now with this imperative style I don't have to alias the component class to a string name before placing them (eg: get away from <div v-component='{{ currentView }}'></div>).

(this is part of a complicated setup, I also use grunt to generate require.ensure boilerplate and have some glue code to make it all work together nicely).