一个组件如何给当做插槽的组件传参？平时我们使用查槽都是这么用的。插槽的直接接受页面的数据。常规用法
<template>
<div>
<father-compoent>
<!--指定将子组件放到父组件中的name=list的slot标签的位置-->
<child-component slot="list" :data="arr"></child-component>
</father-compoent>
</div>
</template>
<script>
export default {
data(){
arr:[1,2,3,4]
},
}
</script>
那么问题来了目前有个需求是需要在页面传入一个数据，在父组件中对数据做一些处理然后再传给子组件中去遍历，怎么做呢？说白了困难点就是在组件中给组件内的插槽传数据。这下就需要用的scope这个属性了
父组件如下
<template>
<div>
<father-compoent>
<!--注意:list字段随意写，但是要和外层使用时一致-->
<slot name="list" :list="arr"><slot>
</father-compoent>
</div>
</template>
<script>
export default {
data(){
arr:[1,2,3,4]
},
}
</script>
重点来了
<template>
<div>
<father-compoent>
<!--这里需要用一个templat标签来定义从父组件来接受的参数的名称-->
<template slot="list" scope="scope">
<!--注意，scope.xxx这个字段要和父组件内传的字段一致-->
<child-component :data="scope.list" :data2="arr"></child-component>
</template>
</father-compoent>
</div>
</template>
<script>
export default {
data(){
arr:[1,2,3,4]
},
}
</script>
子组件中的scope.list就是父组件传过来的数据，而arr就是页面中的数据
就这样通过scope属性来搭桥，插槽位置的组件就可以拿到父组件的数据了，同时子组件同样也可以接受页面上的数据arr，这样大功告成
