我有一个父组件(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
时的预期行为吗?