3. Vue 具名插槽

Vue 具名插槽

• 具名插槽实现一个组件的多个插槽的功能。

• 一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

• v-slot 可缩写成 #。

  <div id="app"> 
      <base-layout>
          <template v-slot:header>
              <h1>Here might be a page title</h1>
          </template>
  
          <p>A paragraph for the main content.</p>
          <p>And another one.</p>
  
          <template v-slot:footer>
              <p>Here's some contact info</p>
          </template>
      </base-layout> 
  </div> 
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  

  Vue.component('base-layout', {
      template:`
          <div class="container">
              <header>
              	<slot name="header"></slot>
              </header>
              <main>
              	<slot></slot>
              </main>
              <footer>
              	<slot name="footer"></slot>
              </footer>
          </div>
      `  
  })
  app = new Vue({
      data: {
          header: 'header'
      },
      el: '#app',
  })