Vue插槽-学习笔记

Vue插槽-学习笔记

Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。

它允许你像这样合成组件：

<todo-button>           <!--使用todo-button组件-->  
  Add todo
</todo-button>

插槽简单来说就是 挖坑 — 填坑 （slot就是这个坑，但不是说slot的中文意思是坑，slot翻译过来为 狭槽，水沟 等意思）

既然Vue实现了这一API，那么故事开始了。。。

默认插槽

<!--使用API-->                           <!--我想使用todo-button组件，但是我想给它在加点东西-->
<todo-button>  
  Add todo     
</todo-button>

<!-- todo-button的template内容-->         <!--组件说:你想给我加东西？加到哪？-->
<button class="btn-primary">
   <slot></slot>                         <!--我说:你把这挖个抗,我把东西放进来。于是组件挖了个坑(slot)-->
</button>

<!--当组件渲染的时候，<slot></slot> 将会被替换为“Add Todo”。-->

（组件说：你以为我就挖了个坑是青铜，其实我是王者。。我挖的坑，你想放什么都行）

插槽中不仅可以放字符串！插槽还可以包含任何模板代码，包括 HTML：或其他组件

备用内容

（组件说：你以为这样就完了？其实我在第五层。。我不仅挖了坑，我的坑没放东西，我还告诉你，你没放）

<slot>你没放东西！！！你没放东西！！！你没放东西<slot>    <!--slot里面的数据就是备用内容了-->

当我们在一个父级组件中使用子组件并且不提供任何插槽内容时，备用内容将会被渲染，但是如果我们提供内容，则这个提供的内容将会被渲染从而取代备用内容。

具名插槽

但是我说：我有很多东西要加，一个坑少了，你起码得来亿个坑

组件说：那好，（于是组件真挖了亿个坑） --------问题来了：这么多东西放什么坑？我具体放哪个坑呢？

于是我们协商，把 东西 和 坑 都起个名字，好一一对应

<!--我来用组件-->
<todo-button>
  <template v-slot:header>                 <!--于是我就把这个东西用template包起来，而且用v-slot告诉组件放什么坑-->
    <h1>Here might be a page title</h1>
  </template>

  <template v-slot:default>
    <p>A paragraph for the main content.</p>
  </template>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</todo-button>

<!--组件模块-->                   <!--组件说：我也挖了这么几个坑，我用slot的attribute中的name命名了，等你来放-->
<button class="btn-primary">
    <slot name="header"<