具名插槽和作用域插槽 使用的时候 都是 v-slot 区别是一个是 : 一个是 = 两者同时使用的时候会出错
列如: 以下代码肯定会出错
<template v-slot:name v-slot="getson">
<p>{{getson.aaa}}</p>
</template>
如何让两者能同时使用?
首先在slot声明的时候 让name的名称与后面取值的名称保持一致
例如:
<template>
<div>
<slot name="aaa" :aaa="src"></slot>
<slot name="bbb" :bbb="img"></slot>
</div>
</template>
<script>
export default{
data(){
return{
src:"图片地址",
img:"图片地址2"
}
},
}
</script>
调用的时候 在v-slot 后面加上:取值的名字
<template>
<div>
<son3>
<template v-slot:aaa="getson">
<p>{{getson.aaa}}</p>
</template>
</son3>
<son3>
<template v-slot:bbb="getson2">
<h1>作用域插槽</h1>
<p>{{getson2.bbb}}</p>
</template>
</son3>
</div>
</template>
<script>
import son3 from "./components/03-son.vue"
export default{
methods:{
},
components:{
son3:son3
}
}
</script>