Vue: Can Component not have a template？

[suemi994]

In some scenes, maybe one model needs to have several children models in its scope because childs need to share data and methods of their parent midel, like below.

<div id="parent">
    <!-- model parent -->
    <div id="child1">
        <!-- model child1 -->
    </div>
    <div id="child2">
        <!-- model child2 -->
    </div>
        ...
</div>

I have tried the simplest way, but it didn't work. There is one effective model, the parent.

var parent=new Vue({
    el:'#parent',
...
});
var child1=new Vue({
    el:'#child1',
...
});
..

Then I thought components should be used. But I didn't want to make a component, but a thing like controller in angular. Can I just do this?

Vue.component('child1',{
    inherit:true,
    el:'#child',
    ...
});

or like below?

var child1=parent.$addChild({
    inherit:true,
    el:'#child1',
    ...
});

Vue is awesome, but components may be too heavy for such scenes I have mentioned. By the way, it seems that chrome app doesn't support component system, it give an error like this:

Uncaught TypeError: Cannot read property '$before' of undefined  vue.min.js:7

[suemi994]

I'm sorry, the last error is not because of chrome app, but the component must be defined before the model entity. Since I have tried the two ways I mentioned, they don't work. But I really can't accept make the html file several templates just because of separating and sharing data.

Is there any way to implement things like controllers in vue.js?

[TMiguelT]

I don't think Vue can simulate controllers like that. You're right that you can make a child component with inherit: true, which I do often, but you'll still have to put the child's template in the child component, you can't use the existing parent template. So for example this will not work: http://jsfiddle.net/yye93s4g/2/, but this will: http://jsfiddle.net/wnfjbp6x/1/

I think this would have worked before Vue was changed to start compiling HTML in the parent scope only: https://github.com/yyx990803/vue/releases/tag/0.11.1 I have some issues with compiling working this way, and actually my second point of this thread: https://github.com/vuejs/Discussion/issues/105 is a similar problem to you wanting controllers/components without a template.

@yyx990803 Evan, do you think that a reasonable way to make everyone happy with the scoping issues is to compile the template in the _child_ scope when the child component has no template? As far as I know, a component without a template is totally useless at the moment so it's not going to break any existing code. And I think this would solve both my and @suemi994's problems. Of course if we're doing that you could just call them controllers and try to distinguish them from components like Ember does, but either way it might be a good idea.

[yyx990803]

Just a random idea, maybe an attribute flag, e.g. <div v-component="x" inline-template>, which indicates that you don't want content transclusion for what's inside the component?

[TMiguelT]

Yeah I quite like that idea. It has the same effect as my suggestion but is more explicit, and might allow you to reuse a component in different template contexts.

[agonbina]

:+1: for the inline-template attribute

[crswll]

I like the sound of inline-template as well. I just ran into this situation and I found myself expecting Vue to use the inline template if the template option wasn't provided (I'd even expect it to be used if the template option was provided).

[janschoenherr]

:+1: I was looking for the same thing.

[Hagith]

Vue is great, with inline-template it could be my primary front-end framework!

I'm using pimcore which allows you to drag&drop snippets (server-side html with editables) in any place on any page. It could be great to use vue component with this generated html.

[Hagith]

It's ugly hack, but it works for case I have: http://jsfiddle.net/modernweb/dphqr04u/1/
Of course this will only work for direct child components of #app.

[yyx990803]

inline-template now in dev: https://github.com/yyx990803/vue/commit/bd47f1c71e9826f6e42cb9056829f58cc7681c05

[shredmaster]

this is a major improvement, any idea when this will be included in the future release?