默认插槽slot

一般出现情况，当你要复用一个组件时，但是这个组件中你复用的只有他的框架，他的所有内容你都需要根据具体内容再次修改。
而如果你在组件中添加v-show来实现上述要求时，会让结构变得非常混乱，无法正常阅读源码。因此最好的方法是每个组件再单独提供一些html结构和样式。
所以vue提供了一个方法，插槽：
在组件中需要使用当你没有向我传递值时，我会展示到页面上来表示哪里需要插入新的结构。
然后在引用该组件的地方写好插槽的内容。
例如：Student是组件，在app中 

1
2
3
4
5
<div id="app">
    <Student>
        <img src="">
    </Student>
  </div>

这样子，在Student的slot标签处，就会被插入img标签

具名插槽

可以给每个插槽命名，通过不同的插槽，插入到不同的位置。

1
2
<slot name="center">我是命名为center的插槽</slot>
<slot name="foot">我是命名为foot的插槽</slot>

需要具体放在哪个插槽里，需要在标签添加属性slot=”center”会放到slot的插槽里。
例：

1
2
3
4
5
6
<!-- 像下面一样 -->
<div slot="center"id="app">
  <Student>
      <img src="">
  </Student>
</div>