10-slot插槽 & 作用域插槽

插槽内容: 将 <slot’> 元素作为承载分发内容的出口,可以合成组件

/* <slot> 元素将会被替换为 "Your Profile" */
<navigation-link url="/profile"> Your Profile</navigation-link>
Vue.component('navigation-link',{
  template: `<a><slot></slot></a>`
})

插槽内可以包含任何模板代码,包括 HTML

<navigation-link url="/profile">
  <!-- 添加一个 Font Awesome 图标 -->
  <span class="fa fa-user"></span>
</navigation-link>

Vue.component('navigation-link',{
  template: `<a><slot></slot></a>`
})

如果组件没有包含一个 <slot’> 元素，则任何传入它的内容都不会被替换并渲染

具名插槽:
利用 name 特性可以在组件内放置多个插槽

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

向具名插槽提供内容时,可以在父组件的 <template’> 上使用 slot 特性

<base-layout>
  <template slot="header"><h1> title</h1></template>
  <template slot="footer"><p>info</p></template>
</base-layout>

slot 特性也可以用在普通元素上

<base-layout>
  <h1 slot="header">Here might be a page title</h1>
  <p slot="footer">Here's some contact info</p>
</base-layout>

插槽的默认内容:
在 <slot’>标签内部指定默认内容,父组件在插槽中提供内容,默认的内容会被替换掉

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

编译作用域:
在插槽内使用数据时,父组件模板的所有东西都会在父级作用域内编译;
子组件模板的所有东西都会在子级作用域内编译

<navigation-link url="/profile">{{ user.name }}</navigation-link>

作用域插槽:
将待办项内容包裹在一个 <template’> 元素上,通过 slot-scope=“Props” 可从子组件获取数据

例1

<!--父组件-->
<div id="root">
  <child>
    <template slot-scope="props"> /* props 是一个对象 */
      <li>{{ props.item }}</li>
    </template>
  </child>
</div>

/*  子组件 */
Vue.component('child',{
  data(){
    return {
      list: [ 1, 2, 3, 4, 5]
    }
  },
  template: `<ul><slot v-for="( item, index ) of list"></slot></ul>`
});

var vm = new Vue({
  el: '#root'
});

例2

/* 子组件 */
`<ul>
  <li v-for="item in obj" :key="item.id">
    <!-- 为每个 todo 准备了一个插槽，-->
    <!-- 将 `todo` 对象作为一个插槽的 prop 传入 -->
    <slot :todo="item">{{ todo.text }}</slot>
  </li>
</ul>`

/* 父组件 */
<todo-list :todos="todos">
  <template slot-scope="slotProps"> /* 将 `slotProps` 定义为插槽作用域的名字 */
    {{ slotProps.todo.text }}
  </template>
</todo-list>

解构 slot-scope

<todo-list v-bind:todos="todos">
  <template slot-scope="{ todo }">
    <span v-if="todo.isComplete">✓</span>
    {{ todo.text }}
  </template>
</todo-list>