一、v-slot插槽
概念:v-slot 是用来接受父组件传递过来的 内容 的一个双标签,内容可以是html或者模板。
使用:父组件在注册好的子组件标签内写内容,子组件通过v-slot双标签接受,标签放哪接受到的内容就在哪
分类:1、匿名插槽 _____2 、具名插槽____3、作用域插槽
1、匿名插槽
默认的插槽,没有任何标识,没有特意指定传递到哪个插槽时,由默认插槽接收
子组件
//这是准备好的子组件
<template>
<div>
<p>这是匿名插槽</p>
<slot>这是默认内容</slot> ----slot标签用来接受传过来的内容,
----如果父组件没有传内容就显示默认的内容
----有传递过来的内容就会将默认的内容替换掉
</div>
</template>
父组件
<template>
<div>
<A>这是要传递过去的内容</A> --第三步:使用子组件
--传内容:在子组件标签内部写入内容传到子组件
</div>
</template>
<script>
import A from './components/test/a.vue' --第一步:导入子组件
export default {
components: {
A --第二步:注册子组件
}
}
</script>
渲染结果
2、具名插槽
一个拥有name属性标识的插槽
代码如下(示例):
子组件
<template>
<div>
<p>这是具名插槽</p>
<slot name="aaa">这是默认内容</slot> --给slot标签添加了一个name属性,
--name属性值相当于给了slot标签一个标识,父组件可以通过这个标识来指定你这个插槽来接收
--如果父组件没有传内容就显示默认的内容
--有传递过来的内容就会将默认的内容替换掉
</div>
</template>
父组件
<template>
<div>
<A> --第三步:使用子组件
传递过去的内容 A -- 模板外的是不会被传过去的,除非另外有一个匿名插槽接收
<template slot="aaa"> --需要样板标签来装载要传递内容 再通过slot='' 来传递到一个指定的插槽
// #aaa 语法糖(简写)
传递过去的内容 B
</template>
</A>
</div>
</template>
<script>
import A from './components/test/a.vue' --第一步:导入子组件
export default {
components: {
A --第二步:注册子组件
}
}
</script>
这是渲染出来的结果
3、作用域插槽
携带数据的插槽
子组件
<template>
<div>
<p>这是作用域插槽 顺带具名</p>
<slot name="aaa" :newArr='arr'>--通过 :自定义属性='要传递的数据' 向父组件传过去数据供他使用
这是默认内容
</slot>
</div>
</template>
<script>
export default {
data () {
return {
arr: ['李四', '张三', '王五'] --子组件中的数据
}
}
}
</script>
<style>
</style>
父组件
<template>
<div>
<A>
传递过去的内容 A
<template v-slot:aaa='obj'> --因为这里还有具名,不能同时使用2个slot指令,所有要合并
//v-slot:name属性值='接收子组件传过来数据的对象'
--通过v-slot命令 v-slot='自定义对象' ,接收的数据就在这个对象里面,对象语法使用
传递过去的内容 B {
{
obj.newArr[0]}}
</template>
</A>
</div>
</template>
<script>
import A from './components/test/a.vue'
export default {
components: {
A
}
}
</script>
<style>
</style>
这是渲染的结果