Question

您能否解释一下Vue为什么在这里告诉我Unknown custom element: <MyComponent> - did you register the component correctly?：

const CustomComponent = Vue.component('CustomComponent', {
  template: '<div>test</div>'
})

const RenderComponent = Vue.component('RenderComponent', {
  props: {
    component: {
        type: [Function, String]
    }  
  },
  template: '<component :is="component"></component>'
})

new Vue({
  el: '#app',
  components: {
    MyComponent: CustomComponent,
    RenderComponent
  },
  template: '<render-component component="MyComponent"></render-component>'
})

https://jsfiddle.net/2qobuj4y/1/

如何在此处将组件正确传递给道具？有例子吗？

Answer 1

MyComponent不存在，因此您不想在应用程序的components中列出它。将您的应用代码更改为：

new Vue({
  el: '#app',
  components: {
    CustomComponent, // Not actually being used, the template passes a string
    RenderComponent
  },
  template: '<render-component component="CustomComponent"></render-component>'
})

Here is a fiddle

说明

您已在主CustomComponent组件中将MyComponent正确注册为app，并且可以直接在其模板中使用它。但是，然后您还将具有值“ MyComponent”的字符串传递给RenderComponent组件。 RenderComponent然后尝试实例化一个MyComponent组件，但是在它正在寻找的全局范围中不存在任何组件。（该名称仅在您注册的主要app组件中存在该名称。）

或者，如果您在传递MyComponent时使用绑定代替（即:component而不是component），则仍然无法工作，因为您无法传递{{1 }}作为道具。

（编辑：您可以但不可以使用传统方式。这有效：components。请参见this comment from Evan You）

有趣的选择

您提到改为尝试从:foo="$options.components.foo"传递它，虽然我不能说这是否是一个好习惯，但它确实有效。如果您曾经迁移到无法访问全局范围的单文件组件，这可能会变得更糟，这有些令人困惑，但确实可以：

data

Here is that fiddle

在VueJS中将组件作为道具传递时，未知的自定义元素错误

1 个答案: