子级代码:
<template>
<div>
<slot></slot> //默认
<slot name='title1'></slot> //具名
<slot :nme="num"></slot>//作用域
// 备注的是第二种写法
// 一般情况下作用域插槽都是默认的.但是当你设定了默认插槽同时又使用作用域插槽.
// 这个时候我们才给作用域插槽添加一个名字.
<!-- <slot :nme="num" name="hello"></slot> -->
</div>
</template>
<script>
export default {
data(){
return{
num:[1,2,3,4,5,6,7,8,'作用域插槽']
}
}
}
</script>
<style>
</style>父级代码:
<template>
<div>
//默认插槽
<use01>
<p>默认插槽</p>
</use01>
//具名插槽
<use01>
<template #title1>
<p>具体名插槽</p>
</template>
</use01>
//作用域插槽
<use01>
<template v-slot='abc'>
<div>{
{ abc.nme }}</div>
</template>
</use01>
// 备注的是第二种写法 作用域插槽下的具名插槽
<!-- <use01>
<template v-slot:hello="abc">
<div>{
{ abc.nme }}</div>
</template>
</use01> -->
</div>
</template>
<script>
import use01 from '../components/01.vue'
export default {
components:{
use01
}
}
</script>
<style>
</style>输出结果:
默认插槽
默认插槽
具体名插槽
[ 1, 2, 3, 4, 5, 6, 7, 8, "作用域插槽" ]
注意:
作用域插槽在没用使用具名的时候和默认插槽一起使用,会先执行一次默认插槽,再执行作用域插槽.
本质上作用域插槽也算是默认插槽.也可以当默认插槽使用.
代码如下:
子级:
<template>
<div>
<slot></slot>
<slot name='title1'></slot>
<!-- <slot :nme="num"></slot> --> //这里是隐去的部分
<slot :nme="num" name="hello"></slot>
</div>
</template>
<script>
export default {
data(){
return{
num:[1,2,3,4,5,6,7,8,'作用域插槽']
}
}
}
</script>
<style>
</style>父级:
<template>
<div>
<use01>
<p>默认插槽</p>
</use01>
<use01>
<template #title1>
<p>具体名插槽</p>
</template>
</use01>
<!-- <use01>
<template v-slot='abc'>
<div>{
{ abc.nme }}</div>
</template>
</use01> --> //这里是隐去的部分
<use01>
<template v-slot:hello="abc">
<div>{
{ abc.nme }}</div>
</template>
</use01>
</div>
</template>
<script>
import use01 from '../components/01.vue'
export default {
components:{
use01
}
}
</script>
<style>
</style>输出结果:
默认插槽
具体名插槽
[ 1, 2, 3, 4, 5, 6, 7, 8, "作用域插槽" ]
总结:
使用作用域插槽的时候不要使用默认插槽.如果一起使用,必须给作用域插槽具名.
在引入别人的插槽内容的时候不知道具体使用了什么名字怎么办
通过以下下面具体方法可以查找到.
子级代码: 或者他人的组件.或者其他
<template>
<div>
<use01>
<template v-slot:hello="abc">
//这里不知道具名是什么.就直接使用自己定义的名字.然后打开终端执行
<div>{
{ abc }}</div>
</template>
</use01>
</div>
</template>
<script>
import use01 from '../components/01.vue'
export default {
components:{
use01
}
}
</script>
<style>
</style>得到结果如下:
{ "a": [ 1, 2, 3, 4, 5, 6, 7, 8, "作用域插槽" ] }
这个时候"a":就是对方提供的具体名字.然后将他添加到自己的代码中
<use01>
<template v-slot:hello="abc">
<div>{
{ abc.a }}</div>
</template>
</use01>