VueJs와 같은 페이지에서 같은 앱을 여러 번 사용할 수 있습니까?

VueJs와 같은 페이지에서 같은 앱을 여러 번 사용할 수 있습니까?

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>

이 일을 할 수 있는 방법이 있을까요?

중첩된 Vues는 사용할 수 없습니다.

여러 Vu를 생성할 수 있습니다.

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: ["[%","%]"]
  });
}

새로워진 바이올린.

하지만 이것도 할 수 있어요.

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: ["[%","%]"]
})

바이올린 업데이트

사실 버트의 답변을 바탕으로 작은 꾸러미를 썼어요.구문을 사용할 수 있습니다.

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

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

패키지는 https://github.com/drewjbartlett/vue-multivue에 있습니다.

언급URL : https://stackoverflow.com/questions/44098930/is-it-possible-to-use-the-same-app-multiple-times-on-the-same-page-with-vuejs