javascript - 为什么动态挂载的 vuejs 内容不是根 vue 实例的子组件？

Question

我加载了一些包含自定义组件的 html，并将该内容挂载到父组件中的固定节点。不幸的是，我发现它们之间没有父子关系，所以动态插入组件派发的事件无法被root vue接收。我创建了一个 fiddle ，感谢任何帮助或建议!。 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

通常，当您动态创建 Vue 组件时，它不是任何特定实例的子组件。您可以在选项中明确设置父级

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

在您的 addNewElement 函数中。

让我知道它是否适合您。