vue父子组件——具名插槽

<!-- 子组件 -->
<template>
    <div class='container'>
        <div>子组件</div>
        <slot name="up"></slot>
        <slot name="down"></slot>
    </div>
</template>

<!-- 父组件 -->
<template>
    <div class='container'>
        <div>父组件</div>
        <Child ref="child">
            <div slot="up">Hello World</div>

            <div slot="down">Hello China</div>
        </Child>
    </div>
</template>

<script>
    import Child from '@/components/Child'
    export default {
        components: { Child }
    }
</script>