可以使用多个Vuejs示例吗？

jljoyd4f 于 2023-08-07 发布在 Vue.js

关注(0)|答案(3)|浏览(154)

考虑这个真实世界应用程序的简化示例：

<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部分或合并控制器之外，有没有一种方法可以得到预期的结果？或者，有没有一个更好的术语来描述我正在努力实现的目标？（英语有时很难）

vue.js

来源：https://stackoverflow.com/questions/47773253/are-multiple-vuejs-instances-possible

3条答案

按热度按时间

x0fgdtte1#

就像@ka_lin说的，你应该使用组件来实现这一点。他们是完美的工具。
否则，这几乎是不可能做到的，特别是对于你所给出的例子。Vuejs无法识别{{ message }}属于哪个示例。
最接近“相似”特性的方法是将vue示例的作用域分配给两个元素：

new Vue({
 el: '#app1',
 data () {
   return {
     message: 'Hello'
   }
 },
})

new Vue({
 el: '#app2',
 data () {
   return {
     message: 'Helloa'
   }
 }
})

个字符

赞(0）回复(0）举报 2023-08-07

jtoj6r0c2#

举个例子：

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

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

  })

字符串

赞(0）回复(0）举报 2023-08-07

cvxl0en23#

在Vue3中，你不受应用示例的限制。您可以创建无限的示例。

const app1 = createApp({
  /* ... */
})
app1.mount('#container-1')

const app2 = createApp({
  /* ... */
})
app2.mount('#container-2')

字符串
https://vuejs.org/guide/essentials/application.html#multiple-application-instances

赞(0）回复(0）举报 2023-08-07

我来回答

可以使用多个Vuejs示例吗？

3条答案

相关问题

热门标签

最新问答