Dynamically add a child component in Vue JS

Question

I need some help in Vue JS and Laravel with adding a child vue component.

I have a parent component called "wrapper" and some child components called like "show-1", "show-2", "show-3" ... etc.

Parent component:

<template>
    <div class="card border-light">
        <div class="card-header">
            <h5 class="title">{{ title }}</h5>
        </div>
        <div class="card-body">
            <component
                is="view"
            ></component >
        </div>
        <div class="card-footer"></div>
    </div>
</template>

<script>
export default {
    props : ['title'],
    data() {
        return {
            view : ''
        }
    }
}
</script>

An exmaple child component like "show-1":

<template>
    <div> show-1 </div>
</template>

This code below is in blade for rendering wrapper component with a dynamic child component name:

<wrapper
title="Example"
view="show-1"
></wrapper>

This code is not working but if i change the parent view data "show-1" instead of empty, it works. why ?

When I change the view prop, child vue component should be changed too. How could I do this ?

I want to pass the view attribute to parent component dynamically.

tony19 · Accepted Answer · 2022-07-15 02:09:57Z

3

You can use :is attribute. You can read more about it here: https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components

You can use the same mount point and dynamically switch between multiple components using the reserved element and dynamically bind to its is attribute....

<template>
    <div class="card border-light">
        <div class="card-header">
            <h5 class="title">{{ title }}</h5>
        </div>
        <div class="card-body">
            <!-- make sure to use : -->
            <component v-if="view" :is="view"></component >
        </div>
        <div class="card-footer"></div>
    </div>
</template>

<script>
export default {
    props : ['title'],
    data() {
        return {
            view : ''
        }
    }
}
</script>

edited Jul 15, 2022 at 2:09

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jan 23, 2018 at 8:59

E. S.

2,91920 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hanik Over a year ago

what should i write the blade template for wrapper compnent with send child vue compnent to render fully. ( i need to <wrapper> last text with all props and attributes )

tony19 · Accepted Answer · 2022-07-15 02:24:45Z

1

@Eduardo has the right answer. To add to it, import your components into the parent and switch between them via a data property:

...
<component :is="current"></component >
...

data: {
  current: 'show1'
},
components: {
  show1: Show1Component,
  show2: Show2Component,
  show3: Show3Component
}

The key is to bind the component using the name of the dynamic component.

https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components

edited Jul 15, 2022 at 2:24

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jan 23, 2018 at 9:10

user320487

Collectives™ on Stack Overflow

Dynamically add a child component in Vue JS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related