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

• Z时代
• 2024-01-10
• 分类：技术分享

我知道直接把内容放在一个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'}
]
}
})

结果

我想知道为什么不能这样写，都分别是因为什么吗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，你上面已经生成了一个id为content的DOM节点，你下面的vue实例再创建时，id重复了。

以上是 【Vue】多个实例不能同时挂载一个element的原理是什么? 的全部内容， 来源链接： utcz.com/a/77451.html