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(네임드 슬롯)

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

컴포넌트 라벨 내의 라벨에 슬롯 속성을 추가하고, 속성 값은 슬롯 이름입니다: 🎜rrreee🎜이름을 통해 수신 구성요소 내부: 🎜rrreee🎜🎜3. 범위 슬롯: 매개변수가 있는 슬롯🎜🎜🎜구성요소 태그를 사용할 때 구성요소 내부의 데이터를 사용하기 위해 슬롯의 데이터를 사용해야 하는 경우 다음을 추가해야 합니다. 🎜🎜 는 props.val을 통해 구성 요소가 전달한 데이터를 수신하는 데 사용됩니다(이 val 속성은 다음에서 가져옵니다). 내부 슬롯에 바인딩된 구성 요소 속성)🎜🎜예: 🎜rrreee🎜 구성 요소 내부: 슬롯 <slot :val="message"></slot>🎜🎜🎜 내 속성 바인딩 관련 무료 학습 권장 사항: 🎜JavaScript🎜(동영상)🎜🎜

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