How to pass an imported component through props?

0
votes

Is there a way I can pass a component through props to a child component from the parent without having to import it from the child?

Parent component:

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

Child component:

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

Currently, in this setup, I am getting Unknown custom event Did you register the component correctly? Error. I know it wants me to register the component in the child component but I don't want to have to import the component from the child. Is there a way to pass the import to the child through props? Is this not possible?

2
javascriptvue.jsvue-component

2 Answers

1
votes

You are really close, the issue is in your first template:

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

You are mising 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>