Vue - Passing slot to child component

Question

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

I have 2 components parent and child.

The parent use the child and display an image from the child with a text.
The child can be used without the parent and only display an image.

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>

Ben Ben · Accepted Answer · 2018-04-04T23:24:40

Try this for the Parent component

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

Vue - Passing slot to child component

1 Answers