vue에는 여러 개의 슬롯이 있습니다-프런트엔드 Q&A-php.cn

vue에는 여러 개의 슬롯이 있습니다

青灯夜游

풀어 주다： 2021-12-22 19:08:43

원래의

10256명이 탐색했습니다.

vue에는 3가지 유형의 슬롯이 있습니다. 1. 기본 슬롯, 구문 "<slot></slot>" 2. 명명된 슬롯, 구문 "

vue에는 여러 개의 슬롯이 있습니다

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

vue의 슬롯은 주로 세 가지 유형으로 나뉩니다.

기본 슬롯, 명명된 슬롯, 범위 슬롯

vue의 슬롯은 상위 구성 요소에서 사용하는 자리 표시자에 제공되는 하위 구성 요소를 나타냅니다. 레이블로 표시되는 상위 구성 요소는 HTML, 구성 요소 등과 같은 이 자리 표시자의 모든 템플릿 코드를 채울 수 있으며, 채워진 콘텐츠는 하위 구성 요소의 레이블을 대체합니다(자리 표시자 대체).

기본 슬롯

기본 슬롯은 가장 간단한 종류의 슬롯입니다. 위 설명과 일치하여 자리 표시자를 대체하여 상위 구성 요소의 하위 구성 요소에 있는 콘텐츠를 변경하는 효과를 얻습니다.

구문: <slot></slot>

<slot></slot>

在子组件中放置一个占位符（slot）：

<template>
    <span>
        <span>莎莎减肥</span>
        <slot></slot>
    </span>
</template>

<script>
export default {
    name: &#39;chassList&#39;
}
</script>

로그인 후 복사

然后在父组件中引用这个子组件，并给这个占位符（slot）填充内容：

<template>
    <div>
        <span>今天吃啥：</span>
        <chassList>
            <span>大嫂不让莎莎吃饭</span>
        </chassList>
    </div>
</template>

로그인 후 복사

这时页面展现的内容会是【今天吃啥：莎莎减肥大嫂不让莎莎吃饭】。

具名插槽

比如在子组件中有两个要替换占位符的地方（两个slot），这时父组件如果要将相应的内容填充到相应的插槽中，靠默认插槽是没有办法判断相应的内容要填充到哪个插槽中的。为了应对这样的场景，具名插槽应运而生。

具名插槽，其实就是给子组件中的插槽取一个名字，而父组件就可以在引用子组件的时候，根据这个名字对号入座，将相应内容填充到相应的插槽中。

语法：<slot name="名称"></slot>

在子组件中放置两个具名插槽：

<template>
    <div>
        <span>第一个插槽</span>
        <slot name="one"></slot>
        <span>第二个插槽</span>
        <slot name="two"></slot>
    </div>
</template>

<script>
export default {
    name: &#39;chassList&#39;
}
</script>

로그인 후 복사

在父组件中引用该子组件，并通过v-slot:[name]的方式将相应的内容填充到相应的插槽中：

<template>
    <div>
        <span>两个插槽：</span>
        <chassList>
            <template v-slot:one>
                <span>one，</span>
            </template>
            <template v-slot:two>
                <span>two</span>
            </template>
        </chassList>
    </div>
</template>

로그인 후 복사

这时页面展示的内容会是【两个插槽：第一个插槽one，第二个插槽two】。

使用默认插槽和具名插槽的注意事项

1.如果子组件中存在多个默认插槽，那么父组件中所有指定到默认插槽的填充内容（未指定具名插槽），会全部填充到子组件的每个默认插槽中。

2.即使在父组件中将具名插槽的填充顺序打乱，只要具名插槽的名字对应上了，填充的内容就能被正确渲染到相应的具名插槽中，一个萝卜一个坑。

3.如果子组件中同时存在默认插槽和具名插槽，但是在子组件中找不到父组件中指定的具名插槽，那么该内容会被直接丢弃，而不会被填充到默认插槽中。

作用域插槽

作用域插槽相比于前面的默认插槽和具名插槽，会比较难于理解和运用。

前面的两个插槽强调的是填充占位的【位置】；
作用域插槽强调的则是数据作用的【范围】；
作用域插槽，就是带参数（数据）的插槽；

在子组件的插槽中带入参数（数据）提供给父组件使用，该参数（数据）仅在插槽内有效，父组件可以根据子组件中传过来的插槽参数（数据）对展示内容进行定制。

语法：<slot :自定义name=data中的属性或对象></slot>하위 구성 요소에 자리 표시자(슬롯)를 배치합니다.

<template>
    <div>
        <span>插槽中的参数值是</span>
        <slot :isAllwo="isAllwo"></slot>
    </div>
</template>

<script>
export default {
    name: &#39;classList&#39;,
    data() {
        return {
            isAllwo: {
                one: &#39;one&#39;,
                two: &#39;two&#39;
            }　　
        }
    }
}
</script>

로그인 후 복사

그런 다음 상위 구성 요소에서 이 하위 구성 요소를 참조하고 다음 내용을 제공합니다. 이 자리 표시자(슬롯)는 다음과 같습니다.

<template>
    <div>
        <span>作用域插槽：</span>
        <classList>
            <template slot-scope="isAllwo">
                {{ isAllwo.isAllwo.one}}
            </template>
        </classList>
    </div>
</template>

로그인 후 복사

이때 페이지에 표시되는 내용은 [오늘 무엇을 먹을지: 사샤의 체중 감량 형수가 사샤에게 식사를 못하게 합니다]입니다.

Named Slot

예를 들어 하위 구성 요소에서 자리 표시자를 교체할 위치가 두 군데(슬롯 2개)인 경우 상위 구성 요소가 해당 슬롯에 해당 콘텐츠를 채우려는 경우 기본 슬롯을 기준으로 해당 콘텐츠를 어떤 슬롯에 채워야 하는지 결정할 수 있는 방법은 없습니다. 이러한 시나리오를 처리하기 위해 명명된 슬롯이 탄생했습니다.

Named 슬롯은 실제로 자식 컴포넌트의 슬롯에 이름을 부여하기 위한 것이며, 부모 컴포넌트는 자식 컴포넌트를 참조할 때 이 이름을 기준으로 해당 슬롯에 해당 내용을 채울 수 있습니다.

구문: <slot name="name"></slot>

하위 구성 요소에 두 개의 명명된 슬롯을 배치합니다. 🎜

<template>
    <div>
        <span>作用域插槽：</span>
        <classList>
            <template slot-scope="isAllwo">
                {{ isAllwo.isAllwo.one|| &#39;空值&#39; }}
            </template>
        </classList>
    </div>
</template>

로그인 후 복사

🎜상위 구성 요소에서 하위 구성 요소를 참조하고 v-slot:[이름]: 🎜rrreee🎜을 통해 해당 슬롯에 해당 콘텐츠를 채웁니다. 이때 페이지에 표시되는 콘텐츠는 [두 개의 슬롯: 첫 번째 슬롯 1, 두 번째 슬롯 슬롯 2]입니다. 🎜🎜🎜기본 슬롯 및 명명된 슬롯 사용에 대한 참고 사항🎜🎜🎜1. 하위 구성 요소에 기본 슬롯이 여러 개 있는 경우 상위 구성 요소의 기본 슬롯에 할당된 모든 패딩 콘텐츠는 명명된 슬롯이 지정되지 않습니다. 하위 구성 요소의 각 기본 슬롯에 완전히 채워집니다. 🎜🎜2. 상위 구성 요소에서 명명된 슬롯의 채우기 순서가 중단되더라도 명명된 슬롯의 이름이 일치하는 한 채워진 콘텐츠는 해당 명명된 슬롯(당근 1개, 구덩이 1개)에 올바르게 렌더링될 수 있습니다. 🎜🎜3. 하위 구성 요소에 기본 슬롯과 명명된 슬롯이 모두 있지만 상위 구성 요소에 지정된 명명된 슬롯을 하위 구성 요소에서 찾을 수 없는 경우 콘텐츠는 기본값으로 채워지지 않고 직접 삭제됩니다. 슬롯. 🎜🎜🎜🎜스코프 슬롯🎜🎜🎜🎜스코프 슬롯은 이전 기본 슬롯 및 명명된 슬롯보다 이해하고 사용하기가 더 어렵습니다. 🎜

🎜처음 두 슬롯은 자리 표시자의 [위치]를 강조합니다. 🎜
🎜범위 슬롯은 [ 🎜
🎜범위 슬롯은 매개변수(데이터)가 포함된 슬롯입니다. 🎜

🎜하위 구성 요소 삽입 시 가져온 매개변수(데이터) 슬롯은 상위 구성 요소에 제공됩니다. 이 매개 변수(데이터)는 슬롯 내에서만 유효합니다. 상위 구성 요소는 하위 구성 요소에서 전달된 슬롯 매개 변수(데이터)를 기반으로 표시 내용을 맞춤 설정할 수 있습니다. 🎜🎜구문: <slot: 속성 또는 개체 in custom name=data></slot>🎜🎜하위 구성 요소에 매개변수(데이터)가 있는 슬롯 배치: 🎜 rrreee🎜하위 구성 요소 참조 상위 구성 요소에서 슬롯 범위를 사용하여 하위 구성 요소의 슬롯에 전달된 매개 변수를 수락하고 데이터를 사용합니다. 🎜rrreee🎜 이때 페이지에 표시되는 내용은 [스코프 슬롯: 슬롯의 매개변수 값은 1]입니다. 🎜🎜템플릿의 {🎜{}}는 표현식을 지원하므로 이때 하위 구성요소가 전달한 다양한 매개변수 값을 사용하여 페이지 콘텐츠를 맞춤설정할 수 있습니다. 🎜rrreee🎜 이때, 하위 컴포넌트에 전달된 파라미터가 null 값인 경우, 페이지에 표시되는 내용은 [범위 슬롯: 슬롯의 파라미터 값이 null 값입니다.] 입니다. 🎜🎜스코프 슬롯에는 다양한 사용 시나리오가 있으며 다양한 프레임워크에서 널리 사용됩니다. 예를 들어 ElementUI에서 테이블의 특정 행 또는 열의 표시 내용을 사용자 정의하는 것은 범위 슬롯의 일반적인 예입니다. 🎜🎜【관련 추천: "🎜vue.js tutorial🎜"】🎜

위 내용은 vue에는 여러 개의 슬롯이 있습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!