vue 作用域插槽

Posted 2021-03-11 mengfangui

作用域插槽

作用域插件的目的就是：获取本组件的数据！。

示例代码todo-list组件：

<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>

即在slot中可以使用本组件todo数据。

与父组件：

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

这样在父组件的写法多余了：

<template v-slot:todo="{ todo }">
    <span v-if="todo.isComplete">?</span>
    {{ todo.text }}
  </template>

因为组件中的slot完全获取到了todo的数据，
子组件完全可以修改为：

<ul>
  <li
    v-for="todo in filteredTodos"
    v-bind:key="todo.id"
  >
    <!--
    我们为每个 todo 准备了一个插槽，
    将 `todo` 对象作为一个插槽的 prop 传入。
    -->
    <slot name="todo" v-bind:todo="todo">
        <span v-if="todo.isComplete">?</span>
      <!-- 后备内容 -->
      {{ todo.text }}
    </slot>
  </li>
</ul>

父组件可以不做逻辑判断了。