Vue：插槽属性prop的使用示例

插槽属性prop的使用示例

文档：https://cn.vuejs.org/v2/guide/components-slots.html

子组件

<template>
  <div class=""> <span v-for="item in list"> <slot v-bind="item">{{item.name}}</slot> </span>
  </div>
</template>

<script>
export default {
  name: 'Child', props: { list: { type: Array },
  },
};
</script>

<style lang="scss" scoped>
</style>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
 

父组件

<template>
  <div class="app"> <!-- 使用默认 --> <Child :list="list" /> <!-- 使用插槽 prop --> <Child :list="list"> <template v-slot="item"> {{item.name}}-{{item.age}} </template> </Child> <!-- 解构插槽 Prop --> <Child :list="list"> <template v-slot="{age}">{{age}}</template> </Child>
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  name: 'App', components: { Child }, data() { return { list: [ { name: 'Tom', age: 23 }, { name: 'Jack', age: 24 }, { name: 'Steve', age: 25 }, ], };
  },
};
</script>

<style lang="scss" scoped>
</style>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
 

显示效果

TomJackSteve
Tom-23 Jack-24 Steve-25
232425

  

 

  
1
  
2
  
3
 

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/113114636