slot插槽

默认插槽：未命名的单个插槽
     若没有包含<slot>元素，则传入的任何内容都会被抛弃

<!-- Nav组件 -->
<template>
   <a :href="url" class="nav-link">
    <slot></slot>
  </a>
</template>
<script>
export default{
  name:'Nav'
}
</script>


<!-- Nav组件的调用 -->
<nav url="/profile">
  <span class="fa fa-user">111</span>
</nav>


<!-- 生成的html -->
<a href="/profile" class="nav-link">
  <span class="fa fa-user">111</span>
</a>

具名插槽：多个插槽
     可以保留一个未命名插槽，是默认插槽，作为所有未匹配到插槽的内容的统一出口

<!-- BaseLayout组件的定义 -->
<template>
  <div class="container">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
</div>
</template>
<script>
export default{
  name:'BaseLayout'
}
</script>


<!-- BaseLayout组件的调用 -->
<base-layout>
  <!-- 也可以直接将slot放在元素上,如：
    <h1 slot="header">header</h1>
   -->
  <template slot="header">
    <h1>header</h1>
  </template>
  <p>A paragraph for the main content.</p>
  <p>And another one.</p>
  <template slot="footer">
    <h1>footer</h1>
  </template>
</base-layout>

插槽默认内容：插槽里面有默认内容，若为这个插槽提供了内容，则默认内容将被替换掉

<button>
  <slot>Submit</slot>
</button>

作用域
   父组件模板的东西会在父级作用域编译
   子组件模板的东西会在子级作用域编译

<navigation-link url="/profile">
  <!--
    此插槽不能访问<navigation-link>的作用域
  -->
  Logged in as {{ user.name }}
</navigation-link>

slot-scope:插槽作用域
     不再限制在<template>元素上使用，可以用在插槽内的任何元素或组件上
     会使作用域插槽变得更干净

<!-- TodoList组件 -->
<ul>
  <li v-for="todo in todos" :key="todo.id">
    <slot :todo="todo">
      {{todo.text}}
    </slot>
  </li>
</ul>

<!-- TodoList组件的调用 -->
<todo-list :todos="todos">
  <template slot-scope="slotProps">
    <span v-if="slotProps.todo.isComplete">Y</span>
    {{slotProps.todo.text}}
  </template>
</todo-list>