VUE-插槽的学习心得

一、插槽的作用
1、插槽在template属性模版之中设置，假设有个<navigation-link"></navigation-link>模版，可在其中设置插槽<slot></slot>;
2、在html文档中，凡是在<navigation-link"></navigation-link>标签内的代码（元素、字符串），将被看做插槽的内容。

二、具名插槽
1、<slot> 元素有一个特殊的特性：name。这个特性可以用来定义额外的插槽：

//模版
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

//html代码
<navigation-link>
 <p>A paragraph for the main content.</p>
 
  <template slot="header">
    <h1>Here might be a page title</h1>
  </template>
  
  <p>And another one.</p>
  
  <template slot="footer">
    <p>Here's some contact info</p>
  </template>
</navigation-link>

html文档中的两个<p>将被放置在main中的slot里面，由于没有指明p的所属solt，p将会被全部归结到main中的slot中。
如果在template中给main中的solt赋予个name="main"属性，那么p将被忽略，除非将两个p放入<template slot="main">中。