Question

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

的示例

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

有没有办法让这项工作？

Answer 1

无法嵌套Vues。

你可以创建多个Vues。

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。

Answer 2

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

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

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

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

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

2 个答案: