作用域插槽的应用

本节目标：理解“作用域插槽的应用”的核心思路，并能把它用于实际开发或面试表达。 ==由于我们在使用组件的时候，可以：==

==所以，我们可以非常灵活地定义一个组件的渲染结构中特定部分（即==slot==区域），同时，该特定部分还可以有默认的渲染结构。==

==简言之，组件要渲染什么内容，由我在使用组件时，通过==\<template v-slot:name="==给组件内==slog==上的属性随便取个名字或者使用对象属性解构=="\>==标签决定==

==这在设计封装数据逻辑同时允许父级组件自定义部分布局的可复用组件时是最有用的。== ==例如，我们要实现一个== \<todo-list\> ==组件，它是一个列表且包含布局和过滤逻辑：==

<ul>  <li    v-for="todo in filteredTodos"    v-bind:key="todo.id"  >    {{ todo.text }}  </li></ul>

==我们可以将每个== todo ==作为父级组件的插槽，以此通过父级组件对其进行控制，然后将== todo ==作为一个插槽== prop ==进行绑定：==

<ul>  <li    v-for="todo in filteredTodos"    v-bind:key="todo.id"  >    <!--

==我们为每个== todo ==准备了一个插槽，==

==将== `todo` ==对象作为一个插槽的== prop ==传入。==

    -->    <slot name="todo" v-bind:todo="todo">      <!--

==后备内容==

 -->      {{ todo.text }}    </slot>  </li></ul>

==现在当我们使用== \<todo-list\> ==组件的时候，我们可以选择为== todo ==定义一个不一样的== \<template\> ==作为替代方案，并且可以从子组件获取数据：==

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

==✓==

</span>    {{ todo.text }}  </template></todo-list>

==这只是作用域插槽用武之地的冰山一角。想了解更多现实生活中的作用域插槽的用法，我们推荐浏览诸如==

Vue Virtual Scroller

==、==

Vue Promised

==和==

Portal Vue

==等库。==

作用域插槽的应用 ​