Vue - 将插槽传递给子组件答案

【问题标题】：Vue - Passing slot to child componentVue - 将插槽传递给子组件
【发布时间】：2018-09-14 15:22:38
【问题描述】：

我在下面使用的图像是加载了vue-svg-loader 的svg 组件（参见app.vue）

我有 2 个组件 parent 和 child。

parent 使用child 并显示来自孩子的图像和文本。
child 可以在没有parent 的情况下使用，并且只显示图像。

两者都使用命名插槽来显示图像，问题是我想将一个命名插槽从父组件传递给子组件，但似乎无法按照我想要的方式使用 vuejs 命名插槽并开始很困惑，有没有其他方法可以解决这个问题？

父.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>

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

为父组件试试这个

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

【讨论】：