vue插槽

App.vue:

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
   <HelloWorld>
     <template v-slot:one>
       <h2>一个内容</h2>
     </template>
     <template v-slot:two>
       <h2>两个内容</h2>
     </template>
     <template v-slot:three>
       <h2>三个内容</h2>
     </template>
     <template>
       <h2>四个内容</h2>
     </template>
   </HelloWorld>
  </div>
</template>

<script>
  import HelloWorld from "./components/HelloWorld.vue"
  export default{
    components:{
      HelloWorld
    }
  }
</script>

HelloWorld.vue:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <slot name='one'></slot>
    <slot name='two'></slot>
    <slot></slot>  <!-- 相当于<slot name='default'></slot> -->
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>