为了让插槽内容能够访问子组件的数据,可以使用如下:
子组件代码:
Vue.component('child',{
props:['lists'],
template:`
<div>
<ul>
<li v-for="list in lists">
<slot v-bind:bbbbb="list"></slot>
</li>
</ul>
</div>
`
})
let vm = new Vue({
el:'#app',
data:{
nameList:[
{id:1,name:'孙悟空'},
{id:2,name:'猪八戒'},
{id:3,name:'沙和尚'},
{id:4,name:'唐僧'},
{id:5,name:'小白龙'}
],
user : {'name':'cax','age':34}
}
})
通过v-bind:bbbbb向子组件元素传递list对象
<div id="app">
<child :lists="nameList">
<template slot-scope="a">
<div v-if="a.bbbbb.id % 2 == 0">你好:<font color="red">{{a.bbbbb.name}}</font></div>
<div v-else>你好:<font color="green">{{a.bbbbb.name}}</font></div>
</template>
</child>
</div>
通过slot-scope="a"接收子组件传递出来的对象,在template域中使用该对象,使用方式如:{{a.bbbbb.name}},也可以slot-scope="{bbbbb}"接收子组件传递的对象,在template域中使用,使用如下:{{bbbbb.name}}
如果是具名插槽,可以采用<slot name="header" v-bind:bbbbb="list"></slot>来传对象,子元素总通过v-slot:default="a"来接收对象