Question

考虑这个真实应用的简化示例：

<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>

我希望看到两条不同的消息，但我会收到两次相同的消息。如果我在'subapp'中将message更改为other_message，则Vuejs会抱怨它无法找到other_message。

有没有办法将它们“嵌入”在一起？如果没有嵌入html部分或合并控制器，有没有办法获得预期的结果？或者，对于我想要实现的目标，还有更好的术语吗？（有时候英语很难）

Answer 1

就像@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>

Answer 2

尝试这样的例子：-

  const App = new Vue({
    el: '#app',
    data: {
      aa: 'Hello Vue!', }

  })
  const vvv2 = new Vue({
    el: '#vvv',
    data: {
      bb: 'Hello Vue!55555555555', }

  })

是否可以使用多个Vuejs实例？

2 个答案: