考虑一下现实应用程序的以下简化示例：
<html>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<div id="subapp">
<p>
{{ message}}
</p>
</div>
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
new Vue({
el: '#subapp',
data: {
message: '¡Hola Vue.js!'
}
})
</script>
</body>
</html>
我希望看到两条不同的消息，但两次却收到同一条消息。如果我更改message为other_message“ subapp”，Vuejs会抱怨找不到它other_message。
有没有办法将它们“嵌入”在一起？缺少取消嵌入html部分或合并控制器的方法，有没有办法获得预期的结果？另外，对于我要完成的工作，是否有更好的术语？（有时候英语很难）
就像@ka_lin所说的那样，您应该为此使用组件。它们是实现此目的的完美工具。
否则，几乎是不可能做到的，特别是对于您提供的示例。Vuejs无法识别{{ message }}属于哪个实例。
最接近“相似”功能的地方是将vue实例的范围分布为以下两个元素：
new Vue({
el: '#app1',
data () {
return {
message: 'Hello'
}
},
})
new Vue({
el: '#app2',
data () {
return {
message: 'Helloa'
}
}
})<script src="https://unpkg.com/vue@2.5.9/dist/vue.js"></script>
<div id="app1">
{{ message }}
</div>
<div id="app2">
{{ message }}
</div>