動的にマウントされたvuejsコンテンツがroot vueインスタンスの子コンポーネントではないのはなぜですか？

Question

カスタマイズされたコンポーネントを含むhtmlをいくつか読み込み、そのコンテンツを親コンポーネントの固定ノードにマウントします。残念ながら、私はそれらの間に親子関係がないことがわかったので、動的に挿入されたコンポーネントによって送出されたイベントはルートビューで受け取ることができません。 私は1つのフィドルを作成しました。助けや提案は高く評価されています。 http://jsfiddle.net/matiascx/7Ljygv81/1/

<div id="app"> 
    <button v-on="click: addNewElement()">Add custom Element</button> 
    <br /> 
    <div id="dynamicloaded"></div> 
</div> 

JS：あなたが動的に作成するとき

new Vue({ 
    el: '#app', 
    data: { 
     sampleElement: '<div class="dynamic-child"><button v-on="click: test()">Test</button></div>' 

    }, 
    methods:{ 
     addNewElement: function(){ 



      var vmtemp = Vue.extend({ 
          template: this.sampleElement, 
          methods: { 
          test: function(){ 
           alert("comes from dynamically loaded content"); 
           this.$dispatch('child-msg','this comes from ajax loaded component'); 
          } 
          } 
         }); 
      new vmtemp().$mount(document.getElementById('dynamicloaded')); 
     }, 
     test: function(){ 
      alert('Test'); 
     }, 
     events: { 
     'child-msg': function(msg){ 
      console.log('message received'+msg); 
     } 
     } 
    } 
}); 

Answer 1

vuejsの作成者のおかげで、私は非同期コンポーネントのアプローチを試してきました。実際には正しく動作し、domにレンダリングされた動的コンテンツの後に親子関係が正しく設定されます。 https://github.com/vuejs/vue/issues/3255#issuecomment-231686976

Answer 2

は通常、Vueのコンポーネントは特定のインスタンスの子ではありません。あなたのaddNewElement関数内でオプション

var _this = this 
var child = new vmtemp({parent:_this}).$mount(document.getElementById('dynamicloaded')) 

内明示的に親を設定することができます。

あなたのために働くかどうか教えてください。