2 augusti, 2019 admin

vue slot 예제

다음과 같이 슬롯 내에서 데이터를 사용하려는 경우: 해당 슬롯은 템플릿의 나머지 부분과 동일한 인스턴스 속성(예: 동일한 ”범위”)에 액세스할 수 있습니다. 슬롯은 범위에 대한 액세스 권한이 없습니다. 예를 들어 URL에 액세스하려고 하면 작동하지 않습니다. 이 예제를 자세히 살펴볼 수 있습니다. Vue 구성 요소는 HTML 및 CSS에 대한 모든 것이 아닙니다. 그들은 자바 스크립트로 구축, 그래서 그들은 또한 기능에 대해있어. 슬롯은 한 번 기능을 만들고 여러 위치에서 사용하는 데 유용할 수 있습니다. 모달 예제로 돌아가 모달을 닫는 함수를 추가해 보겠습니다. 여러분과 여러분의 팀이 부트스트랩*을 사용하고 있다고 상상해 보십시오. 부트스트랩을 사용하면 버튼은 종종 기본 `btn` 클래스와 `btn-primary`와 같은 색상을 지정하는 클래스로 묶여 있습니다.

`btn-lg`과 같은 크기 클래스를 추가할 수도 있습니다. 동적 지시문 인수는 v-슬롯에서도 작동하여 동적 슬롯 이름을 정의할 수 있습니다. 슬롯에 대한 위의 사용 사례 유형은 분명히 매우 유용하지만 더 많은 작업을 수행 할 수 있습니다. 이전의 간단한 슬롯 예제와 비교하여 구현에 미묘한 차이가 있음을 다시 알 수 있습니다. 그 차이는 기본적으로 태그에 전달 된 우리의 속성 (항목)을 연결하는 슬롯 범위 특성에 있습니다. 아래 이미지에서 해당 링크를 볼 수 있습니다: v-on 및 v-bind와 유사하게, V-슬롯에는 인수 전의 모든 것을 대체하는 약식도 있습니다(v-slot:) 특수 기호 #. 예를 들어 v-slot:header는 #header 다시 작성할 수 있습니다 . 이름이 없는 콘센트에는 암시적으로 ”기본값”이라는 이름이 있습니다. 즉, v-slot값은 함수 정의의 인수 위치에 나타날 수 있는 유효한 JavaScript 식을 실제로 받아들일 수 있습니다. 따라서 지원되는 환경(단일 파일 구성 요소 또는 최신 브라우저)에서는 ES2015 를 사용하여 특정 슬롯 소품을 꺼낼 수도 있습니다. 당신은 항상 버튼에 세 가지 클래스를 모두 작성할 필요가 없습니다, 또는 어쩌면 당신은 세 가지를 모두 할 기억 신인을 신뢰하지 않습니다.

이 경우 이러한 세 클래스가 모두 자동으로 있는 구성 요소를 만들 수 있지만 콘텐츠 사용자 지정을 허용하려면 어떻게 해야 합니까? 단추 태그에 모든 종류의 HTML을 가질 수 있으므로 슬롯을 사용해야 하므로 소품은 실용적이지 않습니다.