vue.js 슬롯의 용도는 무엇입니까?

vue.js 슬롯의 기능: 1. 구성 요소 내부의 [<slot></slot>]을 통해 레이블을 표시하고 수신합니다. 2. 슬롯의 유연성을 높이기 위해 슬롯 이름을 지정합니다. 슬롯, 슬롯의 데이터는 구성 요소 내부의 데이터를 사용합니다.

이 튜토리얼의 운영 환경: windows10 시스템, vue2.5.2, 이 기사는 모든 브랜드의 컴퓨터에 적용 가능합니다.

【추천 관련 글: vue.js】

vue.js 슬롯 기능:

1. 기본 사용법

컴포넌트 태그 안에 다른 태그가 중첩되어 있으면 이 태그는 사용할 수 없습니다. 표시하려면 컴포넌트 내부의 <slot></slot>을 통해 수신하면 슬롯이 모든 태그를 동일한 위치에 수신하여 표시합니다<slot></slot>进行接收，slot会将所以标签在同一个位置全部进行接收显示

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

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

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

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

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

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

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

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

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

例如：

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

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

2 . Naming Slot(네임드 슬롯)

이점: 슬롯의 유연성을 높일 수 있습니다.

위 내용은 vue.js 슬롯의 용도는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!