웹 구성 요소의 슬롯에 대해 이야기해 보겠습니다(자세한 예).

이 기사는 슬롯에 대한 관련 지식을 제공합니다. 슬롯의 기능은 템플릿 요소에 값을 전달하고 템플릿 요소의 유연성과 다양성을 향상시키는 것입니다.

Vue에 익숙한 학생들은 모두 "슬롯"의 개념을 알아야 합니다. 슬롯을 사용하면 페이지 콘텐츠 구성을 보다 유연하게 만들 수 있습니다.

웹 컴포넌트 시스템에도 슬롯이라는 개념이 있습니다. 오늘은 슬롯에 대해 자세히 살펴보겠습니다.

• 슬롯을 사용하는 이유는 무엇인가요?
• Slots 관련 기능

Slots의 역할

먼저 템플릿 요소를 살펴보겠습니다.

<template>
    <p>MY CARD</p>
    <p>
        My name is 编程三昧。    </p></template>

템플릿이기 때문에 여러 곳에 사용된다는 뜻인데 여기서 문제가 발생합니다. : 이 템플릿을 사용하는 모든 장소는 템플릿 의 콘텐츠를 표시합니다. 즉, 모든 사람의 이름이 "프로그래밍 삼매"라고 불리는 것은 아닙니다.

이 경우 다른 이름을 가진 사람은 이 템플릿을 사용할 수 없습니다. 당연히 이 템플릿의 사용 범위가 너무 좁고 보편성이 없습니다.

이 템플릿을 보편적으로 만들기 위해서는 .details에 표시되는 콘텐츠가 보편적인지 여부가 핵심입니다. .details 中显示的内容是否具有通用性。

开动脑筋想一想，我们是不是可以将其中的”编程三昧“设为动态内容，谁使用这个模板，谁就传入自己的名字。恰好， Slots（插槽）就可以实现这种效果，具体如下：

<!--在模板中使用 slot 进行占位--><template>
    <p>MY CARD</p>
    <p>
        My name is <slot>编程三昧</slot>。    </p></template><!--在使用上面模板的自定义元素中给 slot 传值--><my-card>
    <span>插槽传值</span></my-card><my-card>
    <span>web Components</span></my-card>

其对应的 JS 代码如下：

class MyCard extends HTMLElement {
    constructor () {
        super();
        const template = document.getElementById('cardTmp');
        const templateContent = template.content;

        this.attachShadow({mode: 'open'}).appendChild(
            templateContent.cloneNode(true)
        );
    }}customElements.define('my-card', MyCard);

实现效果：

通过上面的例子，我们可以用一句话总结 Slots 的作用：Slots 的作用就是给模板元素传值，增强模板元素的灵活性和通用性。

Slots 的相关特性

对于 Slots 的相关特性，我通过问答的形式逐一解释。

Slots 的 name 属性有什么作用？

带有指定 name 的 Slots 被称为 ”具名插槽“，name 是 slot 的唯一标识。

在引入插槽内容的元素上需要使用与 Slots.name 值相同的 slot 属性。看下面的代码：

<template>
    <p>MY CARD</p>
    <p>
        My name is <slot>19</slot>。    </p></template><my-card>
    <span>编程三昧</span></my-card><my-card>
    <span>web Components</span></my-card><script>
    class MyCard extends HTMLElement {
        constructor () {
            super();
            const template = document.getElementById(&#39;cardTmp&#39;);
            const templateContent = template.content;

            this.attachShadow({mode: &#39;open&#39;}).appendChild(
                templateContent.cloneNode(true)
            );
        }
    }
    customElements.define(&#39;my-card&#39;, MyCard);</script>

运行效果：

因为传入的 slot 属性值和 Slots 的 name 属性值对不上，所以 Slots 未被插入。

传值时的 slot 属性值必须和 Slots 的 name 属性值保持一致。

不给 Slots 传值会怎样？

将上面两个自定义元素 my-card

이 템플릿을 사용하는 사람은 누구나 자신의 이름을 전달할 수 있는 "프로그래밍 삼매"를 동적 콘텐츠로 설정할 수 있는지 생각해 봅시다. 슬롯은 다음과 같이 이 효과를 얻을 수 있습니다:

<my-card></my-card>

해당 JS 코드는 다음과 같습니다:

<slot>Slots 预设值</slot><p>bcsm</p>

효과 달성:

위의 예를 통해 슬롯의 역할을 한 문장으로 요약할 수 있습니다.

슬롯의 역할은 다음과 같습니다. 템플릿 요소 값을 전달하면 템플릿 요소의 유연성과 다양성이 향상됩니다.

슬롯 관련 기능

슬롯 관련 기능에 대해 질문과 답변 형식으로 하나씩 설명드리겠습니다.

슬롯의 이름 속성은 무엇을 합니까?

지정된 이름을 가진 슬롯을 "명명된 슬롯"이라고 하며, 이름은 슬롯의 고유 식별자입니다.

슬롯 콘텐츠를 소개하는 요소에는 Slots.name과 동일한 값을 가진 슬롯 속성을 사용해야 합니다. 아래 코드를 보세요:

    <h1 id="不在-Templates-中使用-Slots">不在 Templates 中使用 Slots</h1>
    <p>
        <slot>这是 Slots 预设值</slot>
    </p>
    <my-paragraph>
        <span>编程三昧</span>
    </my-paragraph>
    <script>
        class MyParagraph extends HTMLElement {
            constructor () {
                super();
                const template = document.getElementById(&#39;templ&#39;);

                this.attachShadow({mode: &#39;open&#39;}).appendChild(
                    template.cloneNode(true)
                );
            }
        }
        customElements.define(&#39;my-paragraph&#39;, MyParagraph);
    </script>

실행 효과:

전달된 슬롯 속성 값이 Slots의 name 속성 값과 일치하지 않아 Slot이 삽입되지 않습니다.

값을 전달할 때 슬롯 속성 값은 슬롯의 이름 속성 값과 일치해야 합니다.

슬롯에 값을 전달하지 않으면 어떻게 되나요?

위의 두 맞춤 요소 my-card에서 스팬 요소를 제거하고 값을 전달하지 마세요. 즉, 다음과 같이 변경하세요.

<template>
    <p>MY CARD</p>
    <p>
        My name is <slot>编程三昧</slot>。    </p></template><my-card>
    <span>插槽传值1</span>
    <span>插槽传值2</span></my-card><script>
    class MyCard extends HTMLElement {
        constructor () {
            super();
            const template = document.getElementById(&#39;cardTmp&#39;);
            const templateContent = template.content;

            this.attachShadow({mode: &#39;open&#39;}).appendChild(
                templateContent.cloneNode(true)
            );
        }
    }
    customElements.define(&#39;my-card&#39;, MyCard);</script>

실행 후 효과:

예,

Slots에 값을 전달하지 않으면 Slots에 자체 사전 설정 콘텐츠가 표시됩니다

.

실제로 위의 두 가지 점을 결합하면 다음과 같은 결론을 내릴 수도 있습니다. 슬롯에 대한 참조가 있는 경우 이름에 해당하는 슬롯의 콘텐츠만 표시되고 나머지 슬롯은 표시되지 않습니다.

표시됩니다.

일반 DOM에서 슬롯을 사용할 수 있나요?

여기서 "일반 DOM"은 Shadow DOM에 상대적이며 페이지가 위치한 문서 개체를 나타냅니다.

코드는 다음과 같습니다:

<template>
    <p>MY CARD</p>
    <p>
        My name is <slot>编程三昧</slot>。    </p></template><my-card>
    <p>
        <span>插槽传值1</span>
    </p></my-card><script>
    class MyCard extends HTMLElement {
        constructor () {
            super();
            const template = document.getElementById(&#39;cardTmp&#39;);
            const templateContent = template.content;

            this.attachShadow({mode: &#39;open&#39;}).appendChild(
                templateContent.cloneNode(true)
            );
        }
    }
    customElements.define(&#39;my-card&#39;, MyCard);</script>

는 다음과 같이 표시됩니다:

요약: 🎜일반 DOM에서 슬롯을 사용하면 페이지에 직접 렌더링되며 슬롯 효과가 없습니다🎜. 🎜🎜템플릿에는 슬롯을 사용해야 하나요? 🎜🎜앞서 본 예에서 슬롯은 템플릿에 있습니다. 이는 슬롯을 템플릿에 사용해야 한다는 뜻인가요? 🎜🎜일반 DOM의 슬롯이 유효하지 않은 것으로 확인되었기 때문에 Shadow DOM에서 테스트를 수행합니다. 🎜rrreee🎜표시 효과는 다음과 같습니다. 🎜🎜🎜🎜🎜보시다시피 표시 효과, 슬롯을 포함하는 일반 DOM 노드가 Shadow DOM에 추가된 후 슬롯은 들어오는 값을 표시합니다. 이는 슬롯이 효과적이라는 것을 의미합니다. 🎜🎜요약: 🎜슬롯은 Shadow DOM에서 적용될 수 있으며 템플릿에서 사용할 필요가 없습니다🎜. 🎜🎜같은 이름을 가진 여러 슬롯을 맞춤 요소에 사용할 수 있나요? 🎜🎜코드 보기: 🎜rrreee🎜표시 효과: 🎜🎜🎜🎜🎜결론: 🎜한 슬롯은 여러 개의 수신 값을 수신할 수 있으며 모두 구문 분석되어 표시됩니다🎜. 🎜

Slots 的传值元素必须是自定义元素的直接子元素吗？

上面的例子中，所有给 Slots 传值的元素都是自定义元素的子元素，那是不是非直接子元素不行呢？

代码如下：

<template>
    <p>MY CARD</p>
    <p>
        My name is <slot>编程三昧</slot>。    </p></template><my-card>
    <p>
        <span>插槽传值1</span>
    </p></my-card><script>
    class MyCard extends HTMLElement {
        constructor () {
            super();
            const template = document.getElementById(&#39;cardTmp&#39;);
            const templateContent = template.content;

            this.attachShadow({mode: &#39;open&#39;}).appendChild(
                templateContent.cloneNode(true)
            );
        }
    }
    customElements.define(&#39;my-card&#39;, MyCard);</script>

运行效果（传值失效）：

结论：给 Slots 传值的元素必须是自定义元素的直接子元素，否则传值失效。

更多编程相关知识，请访问：编程视频！！

위 내용은 웹 구성 요소의 슬롯에 대해 이야기해 보겠습니다(자세한 예).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!