Question

我加载一些包含自定义组件的html，并将该内容安装到父组件中的固定节点。不幸的是，我发现它们之间没有父子关系，因此root vue无法接收动态插入组件调度的事件。我创造了一个小提琴，任何帮助或建议表示赞赏！ 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功能中。

让我知道它是否适合你。

Answer 2

感谢vuejs创建者的帮助，我尝试过异步组件方法，当动态内容呈现为dom之后，它确实有效且正确的父子关系设置。 https://github.com/vuejs/vue/issues/3255#issuecomment-231686976

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

2 个答案: