尽管已注册,Vue组件仍未知

时间:2017-01-28 09:27:04

标签: javascript templates vue.js

我正试图在另一个内部组成一个组件:

<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>

我有什么步骤吗?我无法弄清楚该组件是如何注册的。

1 个答案:

答案 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。

Thumb规则可以是

如果组件未出现在另一个组件模板中,则它不是子组件。