如果希望插槽模板中使用的属性是组件中的属性时,就用到了 scoped slot。
<template>
<div>
<child>
<h1 slot="asd" slot-scope="props">{{props.value}}</h1>
<h2 slot="dsa" slot-scope="props">{{props.aaa}}</h2>
</child>
</div>
</template>
<script>
import child from "./components/child.vue"
export default {
components:{
child
}
,
data () {
return {
value:123
}
}
}
</script>
<style>
</style>
<template>
<div :style="style">
<slot name="asd" :value="value" aaa="111"></slot>
<slot name="dsa" :value="value" aaa="111"></slot>
</div>
</template>
<script>
export default {
data(){
return {
style:{
height:'500px',
width:'200px',
border:'1px solid #ccc'
},
value:'component value'
}
}
}
</script>
<style>
</style>