【Vue】具名插槽参数笔记

具名插槽

app.vue

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

BaseLayout.vue

<template>
  <div>
    <ul>
      <li v-for="todo in filteredTodos" v-bind:key="todo.id">
        <slot name="todo" :todo="todo">
          <!-- 后备内容 -->
          {{ todo.text }}
        </slot>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "BaseLayout",
  data() {
    return {
      filteredTodos: [
        { id: "001", text: "aaa", isComplete: true },
        { id: "002", text: "bbb", isComplete: true },
        { id: "003", text: "ccc", isComplete: false },
        { id: "004", text: "ddd", isComplete: true },
        { id: "005", text: "eee", isComplete: true },
      ],
    };
  },
};
</script>

子组件中slot标签下的name属性后的todo需要和父组件v-slot后的值相同（具名标签）。父组件等于号后面的这个todo使用了解构赋值。

下面将每个todo标号区分，标号相同的todo意味着需要是一样的值。

从filterTodos中取出todo3将其绑定在todo2上传递给父组件，父组件通过解构赋值获取了todo2中的内容来使用。

父 ： v-slot:todo1="{ todo2 }"
 子 ：  <li v-for="todo3 in filteredTodos" v-bind:key="todo3.id">
        <slot name="todo1" :todo2="todo3">