What is the best way to send an imported component as a prop?

Is it possible to pass a component as a prop from the parent to a child component without directly importing it into 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>

In this current setup, I am encountering an error stating Unknown custom event. Did you register the component correctly?. I understand that the component needs to be registered in the child component, but is there a way to pass the import via props instead of directly importing? Is this feasible?

Answer №1

Almost there! The key issue lies within your initial template:

<template>
  <ChildElement :element="elementName">
</template>
<script>
  // Remember: not accessible in the template scope
  import elementName from '@/components/elementName.vue'

  export default {
    data: {
      // However, this is accessible!
      elementName
    }
  }
</script>

Answer №2

Make sure you include export default.

mainParent.vue:

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

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

subChild.vue:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The output is not shown because the form data is not being generated properly by document.getElement

<html> <head> </head> <body style = "text-align:center;" id = "body"> <form id = "number" method="get" name="number"> <input type="text" id="number1" name="number1" value="" /> <input type="text" id="number2" name="nu ...

Does the angular scope binding using the &(ampersand) operator only bind once or repeatedly?

Is the angular scope binding &(ampersand) a one time binding? I see it referred to as a one-way binding, but is it also one-time? Let's say I have: <my-custom-directive data-item="item" /> And my directive is declared as follows: .direct ...

"Enhance User Experience with Material UI Autocomplete feature that allows for multiple

I am encountering an issue with a material ui auto component that I am currently working on. The component's code looks like this: <Autocomplete multiple options={props.cats} defaultValue={editRequest? ...

Received a Vue prop as a variable name, rather than the actual string value it represents

In the parent component, my string variable is being passed down. The constant GET_STARTED is equal to the string "Get Started" <script setup> import { GET_STARTED } from '../../constants' import GreenBtn from '@/components/p ...

React code is displaying as plain text and the components are not being rendered properly

My latest creation is a component named "componentRepeater" with the main purpose of displaying multiple instances of child components. The props within the "componentRepeater" include properties for the child components, the number of repeats for the chil ...

What is the method for retrieving the values of multiple numbers entered in table rows using ASP?

I am trying to customize an input field so that the client can add or delete N number of input fields as needed. While I have successfully implemented adding input fields, I am facing difficulty in retrieving values from these dynamically added text fields ...

Phonegap application functioning smoothly on computer, encountering issues on mobile device

Hey there! I recently developed a phonegap app that retrieves JSON data from a YQL link and presents it to the user. It works perfectly on Google Chrome desktop, but my client mentioned that it doesn't work on his Android 2.3 device. Could you help me ...

The lack of compatibility between the PHP regex function and the inability to convert JavaScript arguments

I developed a basic test for a function that retrieves the video id from a YouTube URL and displays it. Everything is functioning properly as it is, but when I add jQuery code to the mix, I encounter an error message NS_ERROR_XPC_BAD_CONVERT_JS: Could not ...

Auto-fill input field with URL parameter values using JavaScript or jQuery

I am in possession of a URL http://www.example.com/state=survey&action=display&survey=39&zone=surveys&currency=Denmark Upon accessing the above link, a user will be directed to a new page containing a form. Within this form, there is an i ...

Having trouble with the CSS positioning of divs created with JavaScript: it's not behaving as anticipated

Let me start by saying I have always struggled with CSS positioning. It seems like I am missing something simple here... So, I have a JS script that generates divs within a parent container called #container which is set to absolute position. Here is the ...

Exploring nested components traversal in React

In my project, I have created a product component that displays the products' name, price, and description. const Product = (props) =>{ return( <div> <p>Price: {props.price} </p> <p>Name: ...

Simultaneously sending requests with REST API and Ajax

Is it considered problematic to send multiple ajax requests simultaneously to various endpoints of a REST API that ultimately end up affecting the same resource? Please note: each endpoint will be responsible for modifying different properties. For insta ...

Angular App Failing to Validate Session Cookie 'sessionId' in AuthGuard

Encountering a perplexing issue with my Angular application where the AuthGuard fails to recognize a session cookie named 'sessionId' correctly. I have successfully implemented user authentication, and the expected behavior is for users to be dir ...

Issues with HTML5 video playback in Apple machines using the Firefox browser

On a website I'm developing, I've included an HTML5 video that works perfectly except for one specific issue - it won't play on Firefox in Apple devices. Surprisingly, it functions well on all other browsers and even on Firefox in Windows an ...

Can you provide the keycodes for the numpad keys: "/" and "." specifically for the libraries I am utilizing or any other library that does not overlook them?

I've hit a roadblock with my Chrome Extension development. Despite using two different methods to add keyboard functionality, the keys "/" for divide and "." for decimal on the keypad are just not registering. I've attempted to tackle this issue ...

Copying an instance in JavaScript - The copy method

Is there a way to easily duplicate all properties and methods of a class instance? class A { get prop1() { return 1; } get prop2() { return 2; } doStuff() { return this.prop1 + this.prop2; } } class B extends A { get prop1() { ...

Is it possible to create a channel list using the YouTube API if I am not the owner of the channel? I am not getting any errors, but nothing is showing up

I am currently working on creating a channel list and playlist of videos from a Music channel that I do not own. Here is the link to the channel: https://www.youtube.com/channel/UC-9-kyTW8ZkZNDHQJ6FgpwQ/featured. My goal is to extract data from this channe ...

Achieving the new value without retrieving the old value in a jQuery on('save') event

I am currently utilizing X-editable and attempting to retrieve the value of an element when a user changes it. However, I am encountering difficulties as I am only getting the previous value instead of the changed value. For example, if the original value ...

Locate the selected radio button's label

There are 25 radio button groups on my page. Each group has a specific action that needs to be performed when a radio button is selected. In order to execute the correct action for each group, I require the NAME attribute of that particular radio group. ...

Implemented a deletion feature in the list, however, certain items that have been checked are not being removed

I am currently participating in the Wes Boros JS 30 challenge, where we created a list of our favorite foods. As part of the challenge, we were tasked with implementing a 'select all' function, an 'unselect all' function, and a 'de ...