How about creating subviews with Vue?

[tiye]

It confused me quite long time since I know MVVM, as a developer based on Backbone.
In Backbone, when new views are required, we just do

subView = new ThatView
subView.$el.appendTo parentView

and remove that subView when it disappears:

subView.remove()

So in such a case in the picture below, I would just open View 1 by clicking Button 1,
and click Button A to open Context I..

How do people build such kind of UI in Vue?

[yyx990803]

If you want, you can totally do something similar in Vue.js:

this.subVue = new SubVue({
    data: this.someDataToInherit
}).$appendTo(this.$el)
// later
this.subVue.$destroy()

This is only necessary when you have super heavy views and you want to explicitly control the lifecycle of the sub view for better memory management. In most cases, you can just compose everything together and use v-if or v-show to display them based on your view state.

[marfalkov]

@yyx990803 It would be so nice if we could have an option to tell Vue that subVue is a child of this and therefore able to $dispatch messages and catch $broadcast-ed messages in the hierarchy of VMs.

[yyx990803]

@marfalkov that's a good point. I do have an internal compiler option that does this... it just occurred to me that I should make it a public option: 0893163

So the above example could be:

this.subVue = new SubVue({
    parent: this,
    data: this.someDataToInherit
}).$appendTo(this.$el)
// later
this.subVue.$destroy()

And you'd get all the benefits: access to $parent and its scope, event communication etc..

[marfalkov]

@yyx990803 Great!