ネストされたVueインスタンス

Question

ネストされたVueインスタンスはとにかくありますか？私はVue componentsについて知っていて、私はそれらのアプリケーションで広く使用していますが、このユースケースでは、（別のプロジェクトを意味します）のページ内で互いに読み込み中ののアプリケーションがあります。例えば

私は、次のような何か：

<div id="parent"> 
    {{msg}} 
    <div id="child"> 
    {{msg}} 
    </div> 
</div> 

... 

new Vue({ 
    el: '#parent', 
    data: { msg: 'sth' }, 
}) 

new Vue({ 
    el: '#child', 
    data: { msg: 'sth else' }, 
}) 

しかし、両方msg年代は親Vueインスタンスのmsgデータを使用します。ここでは例を示したいだけですが、私の使用例では、これらのインスタンスは互いに隣り合っておらず、Djangoフレームワーク（ここで注意することは重要ではありません）を通して互いに関係しています。

更新

それは重複質問はありません。その質問をした人は、入れ子になったVueインスタンスを必要とせず、コンポーネントだけが必要です。しかし、私は明らかにコンポーネントについて知っているが、ネストしたVueインスタンスが必要だと言った。

問題

このissueによると、彼らは、このような動作を実装するつもりはありません。

Answer 1

実際にネストされたインスタンスが必要な場合は、VueJS v-preディレクティブを使用してください。子アプリにv-preを追加できます。詳細はhereです。

<div id="parent"> 
    {{msg}} 
    <div id="child" v-pre> 
     {{msg}} 
    </div> 
</div> 
... 
new Vue({ 
    el: '#parent', 
data: { msg: 'sth' }, 
}) 

new Vue({ 
    el: '#child', 
    data: { msg: 'sth else' }, 
}) 

{{ msg }}子インスタンスの場合は "sth else"となります。 v-preディレクティブのため、ネストされたインスタンス（#child要素）はvueの親インスタンスによってコンパイルされないことに注意してください。