Wozu dient der vue.js-Slot?

vue.js插槽的作用：1、显示标签，在组件内部通过【58cb293b8600657fad49ec2c8d37b4727971cf77a46923278913ee247bc958ee】进行接收；2、命名插槽，增加插槽的灵活性；3、带参数的插槽，将插槽中的数据使用组件内部的数据。

本教程操作环境：windows10系统、vue2.5.2，本文适用于所有品牌的电脑。

【相关文章推荐：vue.js】

vue.js插槽的作用：

1、基本使用

若组件标签内部嵌套一些其它标签的时候，这些标签无法显示，若要显示的话，在组件内部通过58cb293b8600657fad49ec2c8d37b4727971cf77a46923278913ee247bc958ee进行接收，slot会将所以标签在同一个位置全部进行接收显示

2、命名插槽（具名插槽）

好处：可以增加插槽的灵活性

在组件标签内的标签中添加slot属性，属性值为插槽名称:

<div slot="slotName"></div>

在组件内部通过name进行接收:

<slot name="slotName"></slot>

3、作用域插槽：带参数的插槽

组件标签使用时，如果需要将插槽中的数据使用组件内部的数据，需要在组件标签内添加：

bebe770970a86c637abf052e74faee18dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba6821c97d3a051048b8e55e3c8f199a54b2，用来接收组件传递过来的数据,通过props.val(这个val属性来自于组件内部slot绑定的属性)

例如：

　　<List>
　　　　<template scope="props"><div>{{props.val}}</div></template>
　　</List>

　　组件内部：slot内绑定属性 a83d7ebae65a888729b53a78041e89ba7971cf77a46923278913ee247bc958ee

相关免费学习推荐：JavaScript（视频）

Das obige ist der detaillierte Inhalt vonWozu dient der vue.js-Slot?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!