能够利用插槽缩小代码反复,例如循环。
Vue.component('ComponentA',{
data(){
return {
count:0
}
},
template:`
<div>
<slot name="header" :count="count">1</slot>
<slot>qqq(默认值)</slot>
<slot name="footer">2</slot>
</div>
`
})
var vm = new Vue({
el:"#app",
data:{
msg:'sxq'
},
template:`
<div><ComponentA>
111
<template v-slot:header="data">{{data}} -- header</template>
<template v-slot:footer></template>
</ComponentA></div>
`
})
发表回复