是否可以在VueJS的同一頁面上多次使用同一個應用程序？

我有一個項目，我從後端檢索數據並使用vue.js在前端顯示它，我需要多次使用相同的應用程序或在應用程序中使用應用程序。是否可以在VueJS的同一頁面上多次使用同一個應用程序？

下面是一個例子，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>

有沒有一種方法，使這項工作？

來源

2017-05-21 Lindow

你能達到的結果你想使用的組件？一個Vue，然後Vue中的組件的多個副本？ – admcfajn

@admcfajn我同意這也可以用組件來完成。 – Bert

@admcfajn是的只要我可以多次使用不同的Vue彼此相鄰 – Lindow

不可能嵌套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。

來源

2017-05-21 16:09:09 Bert

第二個命題是最好的，但第一個是有趣的另一個用例，所以讓它在那裏:) – Lindow

@ lindow一般，我嘗試回答具體的問題，然後看看我能否提供更好的解決方案:) – Bert

我實際上是根據Bert的回答寫了一個小軟件包。它允許語法：

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

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

的包是在這裏：https://github.com/drewjbartlett/vue-multivue

來源

2017-07-11 21:09:12

是否可以在VueJS的同一頁面上多次使用同一個應用程序？

回答

相關問題