Skip to content

Instantly share code, notes, and snippets.

@ThaddeusJiang
Last active December 2, 2020 06:03
Show Gist options
  • Save ThaddeusJiang/014eb255e4763996bbdfb396fc6e7731 to your computer and use it in GitHub Desktop.
Save ThaddeusJiang/014eb255e4763996bbdfb396fc6e7731 to your computer and use it in GitHub Desktop.
Vue.js slot variable
<todo-list v-bind:todos="todos">
<template v-slot:todo="{ todo }">
<span v-if="todo.isComplete">✓</span>
{{ todo.text }}
</template>
</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>
@ThaddeusJiang
Copy link
Author

2020-12-02T14 48 51

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment