使用动态插槽名,这对于多步骤表单或表格组件等情况非常有用。下面我们看看如何在运行时动态生成插槽:
Child.vue
- for="item in items" :key="item.id">
-
"item.name" /> -
这样,我们就可以在父组件中使用 v-slot:[item.name] 语法为 items 数组中的每个项目动态生成槽名:
Parent.vue
-
"items"> - for="item in items" v-slot:[item.name]>
-
Hello from {{ item.name }}
-
-
我们也可以使用缩写 #[item.name] 来代替 v-slot:[item.name] 。
React 中有无渲染组件,Vue 中查了一下,确实有无渲染组件。
为了更好地理解无渲染组件,我们需要知道什么是作用域插槽。我们快速回顾一下作用域插槽: