CODEWITHSUNDEEP
javascriptvue.jsvue-component
Asile Leaf
Asile Leaf

Reputation: 3

How to pass an imported component through props?

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?

Upvotes: 0

Views: 524

Answers (2)

Andrew Vasylchuk
Andrew Vasylchuk

Reputation: 4779

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>

Upvotes: 0

Ulysse BN
Ulysse BN

Reputation: 11403

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>

Upvotes: 2

Related Questions