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

coldplay.xixi
풀어 주다: 2020-11-30 16:21:20
원래의
6627명이 탐색했습니다.

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

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

이 튜토리얼의 운영 환경: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿