ChenShao
V2EX  ›  Vue.js

vue 模板内容有且只有 1 个顶层 html 标签?

  •  1
     
  •   ChenShao · Nov 25, 2016 · 7805 views
    This topic created in 3459 days ago, the information mentioned may be changed or developed.
    <div id="app">
    	<my-component></my-component>
    </div>
    
    Vue.component('my-component',
    {
        template: '<div>AAAAA</div><div>BBBBB</div>'
    });
    var vm = new Vue({
        el: '#app',
    });
    

    Vue 版本: 2.1.3

    问:

    为什么页面只渲染了<div>AAAAA</div><div>BBBBB</div>哪去了?

    假如模板是:CCCCC<div>AAAAA</div>DDDDD,也只渲染出<div>AAAAA</div>? 如果模板没有标签包围:AAAAA,那么直接就渲染为空了!

    8 replies    2016-11-25 11:23:58 +08:00
    alp
        1
    alp  
       Nov 25, 2016
    最外层只能有一个标签吧。你在外面加一个 div 试试
    ChefIsAwesome
        2
    ChefIsAwesome  
       Nov 25, 2016
    组件肯定是个单独的封装好的东西。你想想如果你要设计一个封装好的 html 组件,它应该是什么样?
    必然是 <MyComponent></MyComponent> 这样的形式。
    不管是 vue 、 react ,还是什么其他的,它都肯定是设计成这样的形式。每个组件必须是套在一个 html 里的。
    viko16
        3
    viko16  
       Nov 25, 2016   ❤️ 1
    是的,每个组件有且仅有一个根节点。

    具体说明在这里,这个的确是 guide 文档没写好的地方
    http://vuejs.org/v2/guide/migration.html#Fragment-Instances-removed
    ChenShao
        4
    ChenShao  
    OP
       Nov 25, 2016
    @ChefIsAwesome 好吧,我承认我占牛角尖了。谢谢解答。
    ChenShao
        5
    ChenShao  
    OP
       Nov 25, 2016
    @viko16 还真的有文档说明。只是这段话出现在官网文档这个地方,真不怪我不认真,我是从 2.0 开始学的。
    viko16
        6
    viko16  
       Nov 25, 2016
    @ChenShao

    新文档的确是没提及,我也是按老文档内容搜索到的

    要不去 vuejs/vuejs.org 提个 issue / PR 吧,方便其他人
    fanyer
        7
    fanyer  
       Nov 25, 2016
    你非要这样写就用 vue2.0 之前的版本, 2.0 之后 vue 组件必须有且仅有一个最顶层祖先节点
    jin5354
        8
    jin5354  
       Nov 25, 2016
    你就记得在最外面裹个 div 就好了
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2810 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 38ms · UTC 10:50 · PVG 18:50 · LAX 03:50 · JFK 06:50
    ♥ Do have faith in what you're doing.