Vue传递组件为prop时出现未知自定义元素错误的原因及正确方法

咱们先搞清楚你遇到的这个错误根源：当你把字符串"MyComponent"传给<component :is>时，Vue会去当前组件（也就是RenderComponent）的已注册组件列表里找这个名称，但你只在根组件里注册了MyComponent，RenderComponent的内部作用域根本访问不到它，自然就报找不到的错误了。

针对这个场景，给你两种靠谱的解决方案，按需选择：

方案一：直接传递组件对象（推荐） #

Vue组件本质上是构造函数，所以我们可以直接把组件对象作为prop传给子组件，不用绕字符串名称这一步。修改后的代码如下：

const CustomComponent = Vue.component('CustomComponent', { template: '<div>test</div>' })
const RenderComponent = Vue.component('RenderComponent', { 
  props: { 
    component: { 
      type: Function, // 组件对象是构造函数，所以类型设为Function
      required: true
    } 
  }, 
  template: '<component :is="component"></component>' 
})
new Vue({ 
  el: '#app', 
  components: { MyComponent: CustomComponent, RenderComponent }, 
  template: '<render-component :component="MyComponent"></render-component>' // 用v-bind传递组件对象
})

这里的关键是：

• 把component prop的类型改为Function（对应组件构造函数）
• 在根组件中用:component（v-bind语法）直接传递MyComponent这个组件对象，而不是字符串

这样RenderComponent拿到的就是现成的组件对象，<component :is>可以直接渲染它，完全不会有作用域的问题。

方案二：确保子组件能访问到字符串对应的组件 #

如果你一定要用字符串传递组件名称，那得保证RenderComponent能找到这个组件，有两种实现方式：

方式1：全局注册组件 #

把MyComponent注册为全局组件，这样所有子组件都能直接访问到它：

// 全局注册，所有组件都能用
Vue.component('MyComponent', { template: '<div>test</div>' })

const RenderComponent = Vue.component('RenderComponent', { 
  props: { 
    component: { 
      type: String,
      required: true
    } 
  }, 
  template: '<component :is="component"></component>' 
})
new Vue({ 
  el: '#app', 
  components: { RenderComponent }, 
  template: '<render-component component="MyComponent"></render-component>' 
})

方式2：在子组件内部注册目标组件 #

直接在RenderComponent的components选项里注册MyComponent，让它的内部作用域能找到这个组件：

const CustomComponent = Vue.component('CustomComponent', { template: '<div>test</div>' })
const RenderComponent = Vue.component('RenderComponent', { 
  components: { MyComponent: CustomComponent }, // 在这里注册目标组件
  props: { 
    component: { 
      type: String,
      required: true
    } 
  }, 
  template: '<component :is="component"></component>' 
})
new Vue({ 
  el: '#app', 
  components: { RenderComponent }, 
  template: '<render-component component="MyComponent"></render-component>' 
})

小总结 #

• 动态传递组件时，优先用组件对象的方式，灵活且避免作用域问题
• 如果用字符串名称，一定要确保目标组件在子组件的作用域内（全局注册或子组件内注册）

内容的提问来源于stack exchange，提问作者fairycode