Vue插槽常用的有几种、插槽的作用、分别如何使用、使用场景 插槽分为匿名插槽/具名插槽/作用域插槽, 插槽的作用是我们可以给组件预留空间自己定义内容。
匿名插槽：不写name属性时的使用方法就叫匿名插槽,其时所谓的匿名插槽是有名字的 他的名字是default
具名插槽： 可以通过v-slot:插槽的名字 , 给指定的插槽定义内容 ,v-slot:名字可以简写为 #名字
作用域插槽： 插槽也可以通过自定义属性预备插槽需要使用的数据 而这种插槽就叫做作用域插槽， 使用场景比如在我写后台管理系统的时候，用到了表格，表格有操作列， 里面需要使用插槽自定义列写按钮，还有我们的组件中在子组件定义一个具名插槽， 在父组件就可以传入不同的数据，利用name属性，显示不同的内容
子组件
<template>
<div id="com">
<div>
<!-- // 默认插槽 可以省略name default-->
<slot></slot>
<!-- //具名插槽 要指定name属性-->
<slot name="h"></slot>
<!-- // 作用域插槽 要指定name和自定义属性，自定义属性绑定数据-->
<slot name="z" :say1="say1" :say2="say2"></slot>
</div>
</div>
</template>
<script>
export default {
data() {
return {
say1: "一点寒芒先到,随后枪出入龙",
say2: "good good study",
};
},
methods: {},
computed: {},
components: {},
};
</script>
<style lang="scss" scoped >
</style>
父组件
<template>
<div id="combox">
<com>
<!-- 默认插槽/我其实也有名字是#default -->
<template>
<div>
我是盖伦-----默认插槽/我其实也有名字是#default,只是默认插槽可以在template不写名字
</div>
</template>
<!-- 具名插槽 在template v-solt:xx名字 -->
<template v-slot:h>
<div>
我是皇朝
</div>
</template>
<!-- 具名插槽 v-slot:h 简写#h -->
<template #z>
<div>
我是赵云
</div>
</template>
<!-- 作用域 插槽可以写数据 -->
<!-- 结构子组件数据出来 say1, say2-->
<template #z="{say1, say2}">
<div>{{say1}}</div>
<div>{{say2}}</div>
</template>
</com>
</div>
</template>
<script>
//引入子组件 子组件写<slot></slot>父组件写template
import com from "@/components/com";
export default {
data() {
return {
};
},
methods: {},
computed: {},
components: {
com,
},
created() {},
};
</script>
<style lang="scss" scoped >
</style>
