十、Vue中的作用域插槽
2019-03-20 本文已影响0人
李浩然_6fd1
有一个这个需求：网页中的数据是由子组件提供的，但是最后如何显示的，不由子组件来决定。而是父组件调用子组件的时候，给子组件做模板。
<body>
<div id="root">
<child>
<template slot-scope="props">
<li>{{props.item}}</li>
</template>
</child>
</div>
<script>
Vue.component('child',{
data:function(){
return{
list:[1,2,3,4]
}
},
template:`<div>
<ul>
<slot
v-for="item of list"
:item=item
></slot>
</ul>
</div>`
})
var vm = new Vue({
el:'#root'
})
</script>
</body>
整个执行逻辑是：
当父组件调用子组件的时候，给子组件传了一个作用域插槽，作用域插槽必须是在template标签内，同时在template标签上声明从子组件接收的数据都放在哪里（props中），在template内，放的数据是接收到的信息应该如何展示（例子中是用li标签来展示，当然还可以换成别的，比如用h1标签）。
什么时候使用作用域插槽：当子组件循环（例子中的数组展示），或者子组件的某一部分的DOM结构应该由外部传递过来，这个时候就用作用域插槽。
使用作用域插槽，子组件可以向父组件传数据，父组件如果想接收这个数据，必须使用template标签，同时使用slot-scope对应的属性名来接收所传过来的数据，子组件template有个item，那么父组件的作用域插槽里面就可以接收这个item，
