複数の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>

を私は2つの異なるメッセージを見ることを期待したいが、私は二度同じメッセージが表示されます。サブアプリケーションでmessage〜other_messageが変更された場合、Vuejsはother_messageが見つからないと訴えます。

「埋め込む」方法はありますか？ htmlパーツの埋め込みやコントローラのマージが不十分な場合は、予期した結果が得られますか？また、私が達成しようとしているものに対してより良い言葉がありますか？（英語は難しい場合があります）

出典

2017-12-12 iCart

：

あなたは「似た」機能をachiveできる最も近いように2つの要素にごVUEインスタンスのスコープを分散させることです。コンポーネント（コントローラとビューを含む）を定義し、そのコンポーネントを2回使用することができます。しかし、より詳細な情報を提供することができれば、より良い答えを得ることができます –

@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インスタンスが使用できますか？

答えて

関連する問題