SOURCE

const app = new Vue({
    el: "#app",
    data: {
        message: "我是Vue标题"
    },
    components: {
        'my-cpn': {
            template: "#cpn"
        }
    }
})

<div id="app" class="main">
	<h2>{{message}}</h2>
	<my-cpn></my-cpn>
	<my-cpn>
		<span slot="center" style="color:red">center</span>
    </my-cpn>
    <my-cpn>
       <span slot="right" style="color:red">right</span>
       <span slot="left" style="color:red">left</span>
    </my-cpn>
</div>

<script type="text/x-template" id="cpn">
	<div class="cpn">
	    我是组件-具名插槽
        <div class="div-slot">
            <slot name="left"><i>左边</i></slot>
            <slot name="center"><i>中间</i></slot>
            <slot name="right"><i>右边</i></slot>
        </div>
	</div>
</script>

.main {
    width: 250px;
    height: 380px;
    border: 2px solid black;
}

.cpn {
    width: 220px;
    height: 80px;
    border: 2px solid green;
    margin: 10px
}

.div-slot{
    width: 200px;
    height: 40px;
    border: 2px solid red;
    margin: 10px
}