H5W3
当前位置:H5W3 > 其他技术问题 > 正文

多个实例不能同时挂载一个element的原理是什么?

我知道直接把内容放在一个Vue实例和挂载元素为id为的content就好了。
可是我想知道创建了两个实例,第二实例无论是绑定了content还是test都不行,这分别是什么原因吗?是因为Vue的本身的什么机制原理呢?

html:

<div id="content">
    <ul>
        <li v-for="item in items">{{item.name}}</li>
    </ul>
    <div id="test">
        <ul>
            <li v-for="user in users">
                {{ user.name }}
            </li>
        </ul>
    </div>    
</div>

js:

var goods=new Vue({
    el:'#content',
    data:{
        active:false,
        items:[
            {name:'bear',},
            {name:'fox'},
        ]
    },
})

var user=new Vue({
    el:'#test',/*或el:'#content'*/
    data:{
        name:'',
        users:[
            {name:'bob'},
            {name:'kat'},
            {name:'tim'}
        ]
    }
})

结果
clipboard.png

我想知道为什么不能这样写,都分别是因为什么吗0 0

回答:

并没有不能创建第二个实例,你的第二个实例其实是正常创建了的
只是在第一个实例创建并渲染后,html里的模板语句已经不存在了

按你的代码来看

var goods=new Vue({
    el:'#content',
    data:{
        active:false,
        items:[
            {name:'bear',},
            {name:'fox'},
        ]
    }
})

//执行到这里的时候,#test的outerHTML已经变成了
/* <div id="test">
    <ul>
    </ul>
</div> */
//而且第一个实例里因为没有users还会报错

//第二个实例取到了#test
//但#test的template已经在第一个实例mount后被覆盖了
var user=new Vue({
    el:'#test',/*或el:'#content'*/
    data:{
        name:'',
        users:[
            {name:'bob'},
            {name:'kat'},
            {name:'tim'}
        ]
    }
})

所以如果要按这样的方式创建两个实例,需要把第二个实例的template单独抽出来

html:

<div>
    <div id="content">
        <ul>
            <li v-for="item in items">{{item.name}}</li>
        </ul>
        <div id="test">
        </div>    
    </div>
</div>

js:

var goods=new Vue({
    el:'#content',
    data:{
        active:false,
        items:[
            {name:'bear',},
            {name:'fox'},
        ]
    }
})
  
var user=new Vue({
    el:'#test',/*或el:'#content'*/
    template: `<ul>
                <li v-for="user in users">
                    {{ user.name }}
                </li>
            </ul>`,
    data:{
        name:'',
        users:[
            {name:'bob'},
            {name:'kat'},
            {name:'tim'}
        ]
    }
})

回答:

原因就是id要唯一,vue渲染页面的时候生成一个DOM,你上面已经生成了一个idcontent的DOM节点,你下面的vue实例再创建时,id重复了。

本文地址:H5W3 » 多个实例不能同时挂载一个element的原理是什么?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址