一.一般常见的插槽分为三种,默认,具名,作用域插槽
首先介绍一下默认和具名插槽的使用
父:
<template>
<div class="">
<!-- 匿名 -->
<tanchuang>默认插槽</tanchuang>
<!-- 具名 -->
<tanchuang v-slot:hasname>具名插槽</tanchuang>
</div>
</template>
<script>
import tanchuang from "./components/tanchuang.vue";
export default {
components: {
tanchuang,
},
name: "",
methods: {},
};
</script>
<style scoped></style>
子:
<template>
<div class="">
<!-- 匿名 -->
<slot></slot>
<!-- 具名 -->
<slot name="hasname"></slot>
</div>
</template>
<script>
export default {
data() {
return {};
},
name: "",
methods: {},
};
</script>
<style scoped></style>
解析:默认插槽: 在父组件里面写上自己要写的内容, 在子组件里面通过<slot></slot>这个标签来进行接收。
具名插槽: 顾名思义,就是有名字的插槽,在父组件上通过 v-slot: 名字 ,在子组件上通过
<slot name='名字'></slot>来进行接收。
现在我们重点来讲一下作用域插槽,传递数据的插槽, 用法: 在子组件通过:名字=‘传递过去的数据’,接收的方法有两种, 在父组件里面可以通过:slot-scope='一个名字' ,用法,当作变量来进行使用,通过{{一个名字}}就可以看到传递的数据,但是不推荐使用在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot
指令)。它取代了 slot
和 slot-scope
这两个目前已被废弃但未被移除且仍在文档中的特性。新语法的由来可查阅这份 RFC。所以建议使用v-slot='啥名字都可以最好是语义化的名字'。
代码:
父:
<template>
<div class="">
<!-- 匿名 -->
<tanchuang>默认插槽</tanchuang>
<!-- 具名 -->
<tanchuang v-slot:hasname>具名插槽</tanchuang>
<!-- 作用域插槽 -->
<tanchuang v-slot="aa">{{ aa }}</tanchuang>
</div>
</template>
<script>
import tanchuang from "./components/tanchuang.vue";
export default {
components: {
tanchuang,
},
name: "",
methods: {},
};
</script>
<style scoped></style>
子:
<template>
<div class="">
<!-- 匿名 -->
<slot></slot>
<!-- 具名 -->
<slot name="hasname"></slot>
<!-- 作用域 -->
<slot :data="arr"></slot>
</div>
</template>
<script>
export default {
data() {
return {
arr: [10, 20, 30, 40, 50],
};
},
name: "",
methods: {},
};
</script>
<style scoped></style>
二.图示
结果:
总结:
1. 作用类似于子向父的过程,从<slot></slot>标签上通过动态绑定属性传递,类似于子---------父
2.任意的名字和任意的名字1 可以任意的取名字,建议语义化
3.匿名和具名插槽类似于父-------------->子
三.实例应用场景
在我们平常开发中用的较少,一般在第三方组件(Element-ui等)里面进行使用: