Passing a custom Vue component as a property to a parent component

Question

Passing a custom Vue component as a property to a parent component

Struggling to find answers to my unique question, I'm attempting to create an interface where users can drag or input images using Vue. I've developed a component called Card, which combines Vue and Bulma to create card-like objects with props for title and content. Easy enough to use when the data is pre-loaded text or image.

However, my challenge lies in embedding another vue component, specifically the PictureInput component from vue-picture-input on NPM, within the Card. I've delved into reactive props and dynamic components in the Vue documentation, but neither addresses this scenario directly.

Code:

Card.vue:

 // Code snippet for the Card.vue goes here

ImageInput.vue:

// Code snippet for the ImageInput.vue goes here

My attempt at dynamically generating the PictureInput object and passing it as the content prop to Card failed due to errors related to cyclic object values and missing methods in the PictureInputClass object. Even simplifying to

<Card :title="makeCardTitle()" :content="PictureInput"/>

resulted in undefined references during rendering. Perhaps changing content to a named slot could be a solution?

I value Vue's flexibility in component reusability and integration, hence my persistence in finding a way to make the PictureInput a child of the Card component without drastic template modifications.

javascript vue.js vuejs2

Answer 1

Answer №1

In order to incorporate the PictureInput component into the Card component, I would utilize slots. The following code snippet provides a simplified example:

Card.vue

<template>
  <div class="card is-size-7-mobile is-fluid">
        <div class="card-header">
            <a class="card-header-title">

                <span class="is-info" @click="isExpanable = !isExpanable">{{title}}</span>
            </a>
        </div>
        <div v-if='isExpanable'>
            <slot/> <!-- Slot for inserting the <PictureInput/> -->
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanable: false,
    }
  },
  props: {
    title: String,
  }
};
</script>

<style scoped>
.card {
  border-radius: 1em;
  background-color: transparent !important;
  border-color: transparent !important;
}
.card-header {
  box-shadow: transparent;
}
</style>

ImageInput.vue

<template>
<div class="content">
    <Card :title="makeCardTitle">
        <PictureInput/>
    </Card>
</div>
</template>

<script>
import PictureInput from 'vue-picture-input';
import Card from './Card';

export default {
    name: 'ImageInput',
    components: {
        PictureInput,
        Card
    },
    props: {
        idx:{
            type:Number,
            default: 0
        }
    },
    computed: {
        makeCardTitle: function(){
            return "page ".concat(String(this.idx));
        }
    }
}
</script>

I hope this helps point you in the right direction. Remember, you typically don't need to use Vue.extend(PictureInput) as long as it's added to the components option key.

Answer 2

In order to incorporate the PictureInput component into the Card component, I would utilize slots. The following code snippet provides a simplified example:

Card.vue

<template>
  <div class="card is-size-7-mobile is-fluid">
        <div class="card-header">
            <a class="card-header-title">

                <span class="is-info" @click="isExpanable = !isExpanable">{{title}}</span>
            </a>
        </div>
        <div v-if='isExpanable'>
            <slot/> <!-- Slot for inserting the <PictureInput/> -->
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanable: false,
    }
  },
  props: {
    title: String,
  }
};
</script>

<style scoped>
.card {
  border-radius: 1em;
  background-color: transparent !important;
  border-color: transparent !important;
}
.card-header {
  box-shadow: transparent;
}
</style>

ImageInput.vue

<template>
<div class="content">
    <Card :title="makeCardTitle">
        <PictureInput/>
    </Card>
</div>
</template>

<script>
import PictureInput from 'vue-picture-input';
import Card from './Card';

export default {
    name: 'ImageInput',
    components: {
        PictureInput,
        Card
    },
    props: {
        idx:{
            type:Number,
            default: 0
        }
    },
    computed: {
        makeCardTitle: function(){
            return "page ".concat(String(this.idx));
        }
    }
}
</script>

I hope this helps point you in the right direction. Remember, you typically don't need to use Vue.extend(PictureInput) as long as it's added to the components option key.

Passing a custom Vue component as a property to a parent component

Answer №1

Similar questions

Alter mustache content according to the variable

The current date is cycling back to the month before

Does adding the Angular bootstrap script at the end of the body tag impact webpage speed more than using ng-app on the body tag?

Exploring the integration of Styled-components in NextJs13 for server-side rendering

Building a multi-form application with HTML5 validation and Vue.js

[ElectronJS][VueJs] ERROR_OSSL_EVP_UNSUPPORTED

JavaScript code for iframe auto resizing is not functioning properly on Firefox browser

Having trouble with implementing both filter and infinite scroll simultaneously in an Ionic list?

Troubleshooting vue.js jest tests using vscode

Integrate Ruby parameter into JavaScript in Rails

Sending the user to their destination

Tips for conducting unit tests on Vue.js components utilizing nuxt-i18n

In Vue templates, any spaces or line breaks between element tags are not disregarded

The value of req.user is not defined in a stack involving node, express, passport,

Positioning elements at the bottom of the container

What is the best way to incorporate white-space:normal within the text of a jQuery Mobile grid button?

Is it feasible to display a message for a certain duration without using the alert() function upon clicking a button?

A guide to showcasing items based on their categories using React.js

The Material UI button feature neglects to account for custom CSS styles when attempting to override the default settings

I'm looking to switch out the `~` to turn it into a URL for the backend, seeing as `<img alt="" src="~/media/Banner/plane.JPG">` is returning a 404 error