插槽的种类：

插槽分为3种，一种是默认插槽、一种是具名插槽、一种是作用域插槽。

插槽的定义：

在子组件中用 <solt></solt> 划出一块区域用来显示父组件中的页面结构，显示的结构在父组件的子组件标签中设置。所以slot就相当于一个占位的东西，如果没有提供数据，那它就会显示自己的默认的数据。

插槽大白话：

A代表父组件，B代表子组件，奶茶代表数据。

例如：A想要喝奶茶，让B去买。如果A告诉了B要香芋奶茶那么B就会买香芋奶茶，如果没告诉B，那B就会买一杯普通的奶茶。

插槽最后显示与不显示是看父组件中引入的子组件标签中有没有模版内容。

默认插槽：

默认插槽又可以叫做匿名插槽，默认插槽是不需要 name 属性，它隐藏的 name 属性为 default 。

默认插槽可以放置在组件任意位置，一个组件中只能有一个默认插槽。

具体实现：

// 父组件
<template><div>//  父组件中引入的子组件<san><div>我是父组件的数据</div> </san></div>
</template>// 子组件
<template><div>// 第一个默认插槽<slot>  <div>我是子组件的默认值</div></slot>//  第二个默认插槽<solt><div>子组件第二个默认插槽</div></solt></div>
</template>

页面显示：

如果父组件不传数据：

// 父组件
<template><div>//  父组件中引入的子组件<san></san></div>
</template>// 子组件
<template><div><slot>  <div>我是子组件的默认值</div></slot></div>
</template>

则显示：

具名插槽：

有时我们的页面需要多个插槽，那么此时就需要用到具名插槽，也可以叫做有名插槽。

与匿名插槽的区别就是具名插槽是通过设置不同的 name 属性来区分多个slot。也就是说具名插槽可以有多个。

具体实现：

// 父组件
<template><div><san><template slot="san1"><div>我是父组件的数据</div></template><div slot="san2">第二个具名插槽2</div></san></div>
</template>// 子组件
<template><div><slot name="san1"><div>我是子组件的默认值</div></slot><slot name="san2"></slot></div>
</template>

页面显示：

作用域插槽：

相比前面两种插槽的内容和样式皆由父组件决定，作用域插槽的特别之处在于它的样式由父组件决定，但是内容却由子组件控制。

前两种插槽不能绑定数据，作用域插槽是一个带绑定数据的插槽。

Vue官方在2.6版本以后改变了插槽的书写方式。

2.6版本之前的写法：

// 父组件
<template><div><son><template slot-scope="san"><p v-text="san.item"></p></template></son></div>
</template>// 子组件
<template><div><ul><li v-for="(item, index) in list" :key="index"><slot :item="item"></slot></li></ul></div>
</template><script>
export default {data() {return {list: ["giao", "你好", "中国"],};},
};
</script>

页面显示：

2.6版本之后的写法：

子组件的写法不用变，父组件的写法变化如下：

<template><div><son><template v-slot="san">{{ san }}<p v-text="san.item"></p></template></son></div>
</template>

页面显示：

抛弃了 slot-scope 使用了v-slot.

vue 中的solt插槽相关推荐

Vue中的solt插槽
一.概念: 插槽就是父组件往子组件中插入一些内容. 二.插槽的种类: 有三种方式,默认插槽,具名插槽,作用域插槽默认插槽就是把父组件中的数据,显示在子组件中,子组件通过一个slot插槽标签显示父组件 ...
vue中slot（插槽）详解，slot、slot-scope和v-slot
slot是什么 slot,也称插槽,可以类比为插卡式的FC游戏机,游戏机(子组件)暴露卡槽(插槽)让用户插入不同的游戏磁条(自定义内容),游戏机会读取并加载磁条里的游戏 Vue的slot,是组件的一块 ...
Vue 中的作用域插槽
作用域插槽 <div id="root"><child></child> </div> Vue.component('child', ...
vue中的slot插槽
1.无名插槽<body><div id="app">123</div><script src="https://cdn.jsde ...
「后端小伙伴来学前端了」关于 Vue中 Slot 插槽的使用，实用且也是组件中必会的一个知识，另外也可以实现父子组件之间通信
前言插槽可以说是 Vue 中非常重要的一部分吧,在我学习和练习的过程中,当组件搭配着插槽一起使用的时候,会发挥的更好一些.更多时候也会更加方便. 今天介绍Vue中三种插槽吧:默认插槽.具名插槽.作用 ...
Vue中的v-slot详解，作用域插槽和具名插槽
1.具名插槽有时候我们希望在指定的位置输出我们的子元素,这时候具名插槽就排上了用场. //组件调用时 <MyFooter v-red :age.sync="age"> ...
vue中插槽solt的使用
solt就是插槽默认会把组件中间的内容渲染出来案例: 在app.vue中直接在组件模版里写内容是不会在页面中显示的这个时候就在card子组件里写上solt标签 solt标签就代表根组件里 ...
【Vue 快速入门系列】3分钟掌握Vue中插槽的使用与理解
文章目录前言一.常规实现方式二.匿名插槽三.具名插槽四.作用域插槽前言插槽作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件 ===> 子 ...
vue中的插槽（slot）
vue中有3种插槽 1.默认插槽 <slot></slot> 2.具名插槽 <slot name="名称"></slot> 3.作用 ...

vue 中的solt插槽

插槽的种类：

插槽的定义：

默认插槽：

具名插槽：

作用域插槽：

vue 中的solt插槽相关推荐

最新文章

热门文章