CODEWITHSUNDEEP
javascriptvue.jsvuejs2
user3187675
user3187675

Reputation: 139

Vue - Passing slot to child component

The image I use below are svg component loaded with vue-svg-loader (see app.vue)

I have 2 components parent and child.

Both use a named slot to display the image, the issue is I want to pass a named slot from the parent component to the child one, but seems like to not work the way I want with vuejs named slot and start to be very confusing, is there another way to solve this issue ?

Parent.vue 

<template>
    <child>
        <label>Text with image</label>
        <slot name="img">
    </child>
<template>

Child.vue

<template>
    <slot name="img">
<template>

App.vue

<template>
    <parent>
        <mySvg slot="img"/>
    </parent>
<template>
<script>
    import mySvg from 'pathToSvg';
    export default {
        components: {
            mySvg,
        }
    }
</script>

Upvotes: 1

Views: 2401

Answers (1)

Ben
Ben

Reputation: 3060

Try this for the Parent component 

<template>
<child>
    <label>Text with image</label>
    <slot slot="img" name="img">
</child>
<template>

Upvotes: 3

Related Questions