vue slot插槽

vue编辑作用域

1. 父组件模版的内容在父组件作用域内编译，子组件模版的内容在子组件作用域内编译。
2. 父组件模板并不感知子组件的状态。

---

vue单个插槽

1. 除非子组件模板包含至少一个 插口，否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的插槽时，父组件传入的整个内容片段将插入到插槽所在的 DOM 位置，并替换掉插槽标签本身。
2. 最初在 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。

---

什么是vue的内容分发

• 为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。

---

具名插槽

• 子组件使用slot标签规定父组件模版内容插放的位置
• 子组件通过name特性的值与父组件模版内容slot特性的值相关联

实现的目的：将父组件模版内容（内容必须在开闭标签内）插到子组件模版的指定位置，

子组件模版内容


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

---

父组件模版内容


<app-layout>
  <h1 slot="header">这里可能是一个页面标题</h1>
  <p>主要内容的一个段落。</p>
  <p>另一个主要段落。</p>
  <p slot="footer">这里有一些联系信息</p>
</app-layout>

---

渲染结果

<div class="container">
  <header>
    <h1>这里可能是一个页面标题</h1>
  </header>
  <main>
    <p>主要内容的一个段落。</p>
    <p>另一个主要段落。</p>
  </main>
  <footer>
    <p>这里有一些联系信息</p>
  </footer>
</div>

---

作用域插槽