vue中slot的理解

嘘，多看图少看文

释义

---

slot, 解释为插槽，它是组件的一块 HTML模板，而这块模板 显示与否 以及 如何显示，取决于父组件。

props 可以从 父组件 向 子组件 传递 数据;
slot 可以从 父组件 向 子组件 传递 html。

显示与否

---

• 子组件至少包含一个slot插槽，否则父组件的的内容不会被展示；
  查看源码
• 如果子组件包含slot插槽
  • 如果父组件不提供内容（即父组件为空），显示slot标签的备用内容。
    查看源码
  • 如果父组件提供内容，则把整个内容片段插入到slot所在的DOM位置，并替换掉slot标签本身。
    查看源码

插槽显示的位置 由子组件自身决定，slot写在组件template的什么位置，父组件传过来的模板将来就显示在什么位置。

那么如何显示呢

---

插槽可分为单个插槽、具名插槽和作用域插槽。

单个插槽

---

顾名思义，一个组件中只能有一个单个插槽。
上面的三个源码中的slot，都是 单个插槽。单个插槽没有 name 属性。

具名插槽

---

• 具名插槽，比单个插槽，多了个 name 属性。
• 具名插槽 将匹配内容片段中有对应 name 的元素。
• 具名插槽可以在一个组件中出现N次，出现在不同的位置。出现的位置以子组件内的顺序为准。

查看源码
从源码中，可以看出，父组件通过html模板上的slot属性关联具名插槽。没有slot属性的html模板默认关联 单个插槽。

作用域插槽

---

作用域插槽，区别于单个插槽和具名插槽，需要 在slot上绑定数据。

<!--父组件-->
<template>
  <div class="father">
    <h3>这里是父组件</h3>
    <child>
      <template slot-scope="user">
        <div class="tmpl">
          <span v-for="item in user.data">{{item}}</span>
        </div>
      </template>
    </child>
</template>

<!-- 子组件 -->
<template>
  <div class="child">
    <h3>这里是子组件</h3>
    // 作用域插槽
    <slot  :data="data"></slot>
  </div>
</template>

 export default {
    data: function(){
      return {
        data: ['小明','小红','小胡','小管']
      }
    }
}