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 중국어 웹사이트의 기타 관련 기사를 참조하세요!