是否可以使用 VueJS 在同一页面上多次使用同一个应用程序？答案

【问题标题】：Is it possible to use the same app multiple times on the same page with VueJS?是否可以使用 VueJS 在同一页面上多次使用同一个应用程序？
【发布时间】：2017-10-21 06:55:51
【问题描述】：

我有一个项目，我从后端检索数据并使用 vue.js 在前端显示它，我需要多次使用同一个应用程序或在一个应用程序中使用一个应用程序。

这是一个例子，https://jsfiddle.net/Lsc7hggs/4/：

<!-- app in app -->
<div class="colorHandler">
    <div class="nameHandler">
         <p>[% nameAttr() %]</p>
         <p>[% nameAttr() %]</p>
         <p>[% randomColor() %]</p>
         <p>[% randomColor() %]</p>
    </div>
</div>

<hr> <!-- OR -->

<!-- multiple time the same app -->
<div class="nameHandler">
  <p>[% nameAttr() %]</p>
</div>

<div class="nameHandler">
  <p>[% nameAttr() %]</p>
</div>

<div class="colorHandler">
<p>[% randomColor() %]</p>
</div>

<div class="colorHandler">
<p>[% randomColor() %]</p>
</div>

有没有办法使这项工作？

【问题讨论】：

使用组件能达到你想要的效果吗？一个 Vue，然后 Vue 中的一个组件的多个副本？
@admcfajn 我同意这也可以通过组件来完成。
@admcfajn 是的，只要我可以多次使用相邻的不同 Vue
在组件之间传递变量可能有点麻烦，看看这个，它使用了多个 Vue 让不同的组件相互“对话”：alligator.io/vuejs/global-event-bus

标签： html vue.js vuejs2

【解决方案1】：

不可能有嵌套的 Vues。

您可以创建多个 Vue。

const colorHandlers = Array.from(document.querySelectorAll(".colorHandler"))
for (let handler of colorHandlers){
  new Vue({
    el: handler,
    methods:{
      randomColor:function(){
        var colors = "['#e6f0ff', '#000a1a' ,'#ffe680', '#ffcc00', '#ffd9b3']";
        var parsed_colors = colors.match(/#[a-f0-9]{6}/g);
        var randomIndex = Math.floor(Math.random() * parsed_colors.length); 
        var randomElement = parsed_colors[randomIndex];
        return randomElement
      }
    },
    delimiters: ["[%","%]"]
  });
}

const nameHandlers = Array.from(document.querySelectorAll(".nameHandler"))
for (let handler of nameHandlers) {
  new Vue({
    el: handler, 
    methods:{
      nameAttr:function(){
        var nom_prenom = 'John Doe';
        return nom_prenom
      }
    },
    delimiters: ["[%","%]"]
  });
}

您更新的fiddle。

但你也可以这样做。

new Vue({
    el:"#app",
    methods:{
    randomColor:function(){
        var colors = "['#e6f0ff', '#000a1a' ,'#ffe680', '#ffcc00', '#ffd9b3']";
        var parsed_colors = colors.match(/#[a-f0-9]{6}/g);
        var randomIndex = Math.floor(Math.random() * parsed_colors.length); 
        var randomElement = parsed_colors[randomIndex];
        return randomElement
    },
    nameAttr:function(){
      var nom_prenom = 'John Doe';
      return nom_prenom
    }
  },
  delimiters: ["[%","%]"]
})

更新fiddle。

【讨论】：

第二个命题是最好的，但第一个命题对另一个用例很有趣，所以让它放在那里:)
@lindow 一般来说，我会尝试回答具体问题，然后看看是否可以提供更好的解决方案:)

【解决方案2】：

我实际上根据伯特的回答写了一个小包。它允许语法：

import MultiVue from 'vue-multivue';
import AwesomeComponent from './Components/AwesomeComponent.vue';

new MultiVue('.my-app', {
   components: {
       AwesomeComponent
   }
});

包在这里：https://github.com/drewjbartlett/vue-multivue

【讨论】：