Heim > Web-Frontend > View.js > Hauptteil

Wozu dient der vue.js-Slot?

coldplay.xixi
Freigeben: 2020-11-30 16:21:20
Original
6637 Leute haben es durchsucht

vue.js插槽的作用:1、显示标签,在组件内部通过【<slot></slot>】进行接收;2、命名插槽,增加插槽的灵活性;3、带参数的插槽,将插槽中的数据使用组件内部的数据。

Wozu dient der vue.js-Slot?

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

【相关文章推荐:vue.js

vue.js插槽的作用:

1、基本使用

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

2、命名插槽(具名插槽)

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

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

<div slot="slotName"></div>
Nach dem Login kopieren

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

<slot name="slotName"></slot>
Nach dem Login kopieren

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

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

<template scope="props""><div></div></template>,用来接收组件传递过来的数据,通过props.val(这个val属性来自于组件内部slot绑定的属性)

例如:

  <List>
    <template scope="props"><div>{{props.val}}</div></template>
  </List>
Nach dem Login kopieren

  组件内部:slot内绑定属性 <slot :val="message"></slot>

相关免费学习推荐: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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage