여러 Vuejs 인스턴스가 가능합니까?

는 실제 응용 프로그램의 간단한 예를 생각해 나는 두 개의 서로 다른 메시지를 볼 기대여러 Vuejs 인스턴스가 가능합니까?

<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 부분을 포함하지 않거나 컨트롤러를 병합하지 않는다면 예상되는 결과를 얻는 방법이 있습니까? 또는 달성하려는 대상에 대한 더 나은 용어가 있습니까? (가끔은 영어가 어렵습니다)

출처

2017-12-12 iCart

당신이 '유사한'기능을 achive 수있는 가장 가까운

는 다음과 같이 두 가지 요소에 VUE 인스턴스의 범위를 배포하는 것입니다. 구성 요소 (컨트롤러와 뷰 포함)를 정의하면 해당 구성 요소를 두 번 사용할 수 있습니다. 하지만 더 자세한 정보를 제공 할 수 있다면 더 좋은 대답을 줄 수 있습니다. –

@ka_lin과 마찬가지로, 이것을 위해 구성 요소를 사용해야합니다. 그들은 이것을위한 완벽한 도구입니다.

그렇지 않으면 제시 한 예와 같이 할 수 없습니다. Vuejs가 {{ message }} 인스턴스에 속하는 것을 인식 할 수있는 방법은 없습니다. 당신은 구성 요소를 사용할 수

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

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

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script> 
 

 
<div id="app1"> 
 
    {{ message }} 
 
</div> 
 

 
<div id="app2"> 
 
    {{ message }} 
 
</div>

출처

2017-12-12 13:34:40 samayo

여러 Vuejs 인스턴스가 가능합니까?

답변

관련 문제