<body>
<div id="app">
  <cpn1>test1</cpn1>
  <cpn1><span slot="left">new left</span></cpn1>
</div>

<template id="cpn1">
  <div>
    <slot name="left">left</slot>
    <slot name="center">center</slot>
    <slot name="right">right</slot>
    <slot><button>button</button></slot>
  </div>
</template>

<script src="../vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello world'
        },
        components: {
          cpn1: {
            template: '#cpn1'
          }
        }
    })
</script>
</body>

Vue - 具名插槽_vue.js

通过name匹配相应的slot，否则显示slot的默认值。