如何通过 props 传递导入的组件？

Question

有没有一种方法可以通过 props 将组件从父组件传递给子组件，而无需从子组件导入？

父组件：

<template>
  <ChildComponent :component="componentName">
</template>
<script>
  import componentName from '@/components/componentName.vue'
</script>

子组件：

<template>
   <div>
      <component :is="component">
   </div>
</template>
<script>
  props: {
    component: Object
  }
</script>

目前，在此设置中，我收到 未知自定义事件 您是否正确注册了组件？ 错误。我知道它希望我在子组件中注册组件，但我不想从子组件中导入组件。有没有办法通过道具将导入传递给孩子？这不可能吗？

Answer 1

你真的很亲密，问题出在你的第一个模板中：

<template>
  <ChildComponent :component="componentName">
</template>
<script>
  // this is not available in template scope
  import componentName from '@/components/componentName.vue'

  export default {
    data: {
      // this, however, is available!
      componentName
    }
  }
</script>

Answer 2

你错过了export default。

parent.vue:

<template>
  <ChildComponent :component="componentName">
</template>
<script>
  import componentName from '@/components/componentName.vue'

  export default {
    data() {
      return {
        componentName
      }
    },
  }
</script>

child.vue:

<template>
   <div>
      <component :is="component">
   </div>
</template>
<script>
export default {
  props: {
    component: Object
  },
}
</script>