一. 插槽

组件

<button type="submit">  
    <slot></slot>  
</button>

1. 插槽作用域

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

子组件的插槽不能访问子组件中的变量.

2.作用域插槽

由于插槽是在当前的父组件渲染的, 为了让插槽访问到子组件的变量, 可以将 user 作为 <slot> 元素的一个 attribute 绑定上去

子组件:

<span>  
   <slot v-bind:user="user"></slot>  
</span>

3. 具名插槽

有时我们需要多个插槽, 给每个插槽取一个名字

子组件html

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

父组件html:

现在 <template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。

<base-layout>  
  <template v-slot:header>  
    <h1>Here might be a page title</h1>  
  </template>  
  
  <p>A paragraph for the main content.</p>  
  <p>And another one.</p>  
  
  <template v-slot:footer>  
    <p>Here's some contact info</p>  
  </template>  
</base-layout>

具名插槽缩写

参数之前的所有内容 (v-slot:) 替换为字符 #, 例如 v-slot:header 可以被重写为 #header.