我正试图在另一个内部组成一个组件:
<prompt :users="users">
...
<dataset v-for="ds in users" :user="user"></dataset>
...
</prompt>
但显然我没有正确注册:
[Vue warn]: Unknown custom element: <dataset> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in root instance)
以下是我尝试注册的方法:
app.js
Vue.component('prompt', {
props: ['userdata', 'users'],
template: '#prompt-template',
components: {
'dataset': {
props: ['userdataset', 'user'],
template: '#dataset-template',
}
}
});
最后,模板:
<template id="dataset-template">
<li>{{ user}}</li>
</template>
<template id="prompt-template">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
default header
</slot>
</div>
<div class="modal-body">
<slot name="body">
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
default footer
<button class="modal-default-button" @click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</template>
我有什么步骤吗?我无法弄清楚该组件是如何注册的。
答案 0 :(得分:0)
问题是您使用dataset
组件作为prompt
组件中的一个插槽。当Vue vm尝试找出组件树时,它将识别它不知道的dataset
组件。 子组件在组件模板中使用,但不在插槽中使用。您必须像在dataset
组件中那样在Vue vm中注册prompt
组件。试试这个
Vue.component('promp', { ... })
Vue.component('dataset', { ... })
将组件注册到同一级别也是有意义的,因为组件的模板也在同一级别(彼此相邻)上注册。
将其与the example you mentioned in another answers comment进行比较:此处子组件axis-label
仅在父polygraph
组件 的模板中使用。这是有效的,因为现在该组件已签订合同,以确定它不是vue-vm的子组件。
应该可以将组件传递到任何组件A
的插槽中,这些组件不是A
的子组件。因此,传递给组件插槽的所有组件都应该可用于vue vm。
如果组件未出现在另一个组件模板中,则它不是子组件。