墨子学院seo百度爱采购优化软件

vue项目中，插槽slot有三种分别是：默认插槽、具名插槽、作用域插槽。默认插槽和具名插槽在平时的开发中用的比较多，作用域插槽用的相对较少，以前我对作用域插槽不是很理解，现在理解了一下。下面通过代码来实现一个作用域插槽的使用场景。欢迎指正。

第一步先创建一个子组件

<template><div class="child-box"><divclass="child-list"v-for="(item, index) in items":key="index"ref="items"@click="childClick(item, index)"><slot  // 通过循环，插槽可以拿到每个列表项的数据name="item":item="item":items="items":index="index">{{ item.label }}</slot></div></div>
</template><script>export default {name:'child',props: {items:{type:Array,default:()=>{ [] }}},data() {return {}}}
</script>

第二步写个父组件，并且在父组件中使用子组件

<template><div><Child :items="items"><template slot="item" slot-scope="{ item }"><div class="navigation-item"><el-icon name="item.icon"></el-icon><div class="navigation-item-title"><span v-text="item.label"></span></div></div></template></Child></div>
</template>
<script>export default {name:'parent',data() {return {items:[{name:1,label:'消息',icon:'message'},{name:2,label:'待办',icon:'dealt'},{name:3,label:'工作台',icon:'workbanch'},{name:4,label:'动态',icon:'dynamic'},]}}}
</script>