Vue: Why vue component must have a top container ?
What problem does this feature solve?
Vue 2.0 component must have a top container, I think it has too much DOM wasted and affected the page struct or style! For example a vue-router single page app, must have a container to mount, and the page is a vue component, must have a top container too. Most time we don't need this two parent container.
Another example is v-html, we can not use abstract element to use it, we must use a real DOM Element, sometime we have three parent DOM wasted. No matter how careful design the DOM and component, this situation can not absoulty avoided.
I think we need to improve these thing, I know it implement very difficult, but I rember before 2.0 version of vue, It's not must have a top container.
What does the proposed API look like?
Some example, it's a page, with main content area and common navigation bar.
<div class="container">
Hello World
</div>
<div class="navigator"> Links or other... </div>
If it's a vur-router page, finally will be
<div id="routerView">
<div class="container">
Hello World
</div>
<div class="navigator"> Links or other... </div>
</div>
If we have a v-html in some component like this:
we want result like this
<div>MuuuName: <mu-name></mu-name></div>'
to:
<div>MuuuName: You know <b>with</b> that Text, <span style="color:..">Coffe me</span> | <span style="color:..">Coffe me 2</span></div>'
The mu-name component must be:
<span>
<span v-html="youKnowHtml"></span>,
<span v-if="coffeBlock!=''" v-html="coffeBlock"></span>
</span>
But it will be:
<div>MuuuName:
<span>You know <b>with</b> that Text</span>,
<span>
<span style="color:..">Coffe me</span> | <span style="color:..">Coffe me 2</span>
</span>
</div>'
It's terrible!!!
xpader
All 2 comments
FYI, you can skip that limitation with functional components.
posva
on 25 Jun 2017
This is something we will consider improving and is already on the roadmap. However we don't have a definitive date for when this will land.
yyx990803
on 26 Jun 2017
Related issues
chrisvfritz
路
46Comments
ShuvoHabib
路
40Comments
wenLiangcan
路
39Comments
ecmel
路
52Comments
ferry77
路
67Comments
Most helpful comment
This is something we will consider improving and is already on the roadmap. However we don't have a definitive date for when this will land.