使用http-vue-loader

时间:2019-07-14 10:48:10

标签: vue.js vue-component vue-loader

我有一个父组件(CyaCandidateItem),该组件具有用于渲染子组件(CyaCandidateItemActions)的插槽。包装器组件(CyaInformativeCandidateItem)将子组件注入到父组件的插槽中。

new Vue({
    el: '#main',
    components: {
        'CyaInformativeCandidateItem': Vue.component('CyaInformativeCandidateItem', {
            name: 'CyaInformativeCandidateItem',
            template: `
                <cya-candidate-item ref="self">
                    <cya-candidate-item-actions slot="action-buttons" ref="actions"></cya-candidate-item-actions>
                </cya-candidate-item>`,
            components: {
                'CyaCandidateItem': Vue.component('CyaCandidateItem',{ // EMBEDDED component
                    name: 'CyaCandidateItem',
                    template: `
                        <div>
                            <slot name="action-buttons"></slot>
                        </div>
                    `
                }),
                'CyaCandidateItemActions': Vue.component('CyaCandidateItemActions',{
                    name: 'CyaCandidateItemActions',
                    template : `
                        <div class="actions">
                            <button>Hallo</button>
                        </div>`,
                    data: function(){
                        return {};
                    }
                })
            },
            mounted: function(){
                console.log('mounted', this.$refs.actions, this.$refs.self, this.$refs);        
            }
        })
    },
    mounted: function(){}
});

直到所有步骤都正常为止。 $refs.actions$refs.self指向有效元素。但是,当我通过CyaCandidateItem渲染http-vue-loader时,$refs.actions$refs.self都未定义。

'CyaCandidateItem': httpVueLoader('/assets/CyaCandidateItem.vue')

好像在安装依赖项之前先安装了依赖项。

这是使用http-vue-loader时的预期行为吗?

0 个答案:

没有答案