Vue.js 两个Vue根，但只有一个DIV_Vue.js

Vue.js 两个Vue根，但只有一个DIV

vue.js

Vue.js 两个Vue根，但只有一个DIV,vue.js,Vue.js,能否在同一页面上使用多个Vue实例，这些实例在DOM的不同部分上运行？事实上，你可以看到，例如。在下面的代码中，我得到了2个Vue根，但只渲染了一个DIV。另一个DIV从DOM中删除。为什么 <body> <div id="firstname"> <input type="text" v-model="name"> <p>{{ name }} {{ lastname() }}</p> </div> <d

能否在同一页面上使用多个Vue实例，这些实例在DOM的不同部分上运行？事实上，你可以看到，例如。在下面的代码中，我得到了2个Vue根，但只渲染了一个DIV。另一个DIV从DOM中删除。为什么

<body>
<div id="firstname">
    <input type="text" v-model="name">
    <p>{{ name }} {{ lastname() }}</p>
</div>
<div id="lastname">
    <input type="text" v-model="name">
    <p>{{ firstname() }} {{ name }}</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>

  const app1 = new Vue({
    el: '#firstname',
    data: {
      name: 'Anna'
    },
    methods: {
      lastname: function(){ return app2.$data.name }
    }
  });

  const app2 = new Vue({
    el: '#lastname',
    data: {
      name: 'Müller'
    },
    methods: {
      firstname: function(){ return app1.$data.name }
    }
  });

</script>
</body>


{{name}}{{lastname（）}}
{{firstname（）}{{name}}
const app1=新的Vue({
el:“#名字”，
数据：{
姓名：“安娜”
},
方法：{
lastname:function（）{return app2.$data.name}
}
});
const app2=新的Vue({
el:'姓'，
数据：{
名字：“穆勒”
},
方法：{
firstname:function（）{return app1.$data.name}
}
});

仅渲染第二个div，因为

app1

的渲染失败。为什么会失败？因为它依赖于尚未初始化的

app2

如果检查控制台，您可以看到错误：

[Vue warn]：呈现中出错：“ReferenceError:无法访问“app2” “初始化前”

（位于）

如何解决这个问题？我不确定，我猜是在实例可以执行之前定义的某种共享对象。

只渲染第二个div，因为

app1

的渲染失败。为什么会失败？因为它依赖于尚未初始化的

app2

如果检查控制台，您可以看到错误：

[Vue warn]：呈现中出错：“ReferenceError:无法访问“app2” “初始化前”

（位于）

如何解决这个问题？我不确定，我想是在实例能够完成之前定义了某种共享对象