구성 요소 확장성을 높이기 위해 슬롯에 대한 자세한 설명을 Vue로 제공합니다.

이 기사에서는 구성 요소의 확장성을 높이는 슬롯과 관련된 문제를 주로 소개하는 vue에 대한 관련 지식을 제공합니다. 구성 요소의 슬롯은 또한 캡슐화하는 구성 요소의 확장성을 높여 사용자가 어떤 콘텐츠를 결정할 수 있는지 결정할 수 있습니다. 모든 사람에게 도움이 되기를 바랍니다.

【관련 권장 사항: javascript 비디오 튜토리얼, vue.js tutorial】

슬롯 슬롯

컴포넌트 슬롯

• 컴포넌트 슬롯도 우리를 위한 것입니다 구성 요소의 확장성이 향상되었습니다. .

• 사용자가 구성 요소 내부의 어떤 콘텐츠를 표시할지 결정할 수 있습니다.

그러한 구성요소를 어떻게 캡슐화하나요? Slot

둘은 차이점도 많지만 공통점도 많습니다.

구성 요소를 개별적으로 캡슐화하는 것은 분명히 부적절합니다. 예를 들어 각 페이지가 반환되면 콘텐츠의 이 부분을 반복적으로 캡슐화해야 합니다.
하지만 이를 하나로 요약하면 무리인 것 같습니다. 일부는 왼쪽 메뉴이고 일부는 돌아가기, 일부는 중간 검색, 일부는 텍스트 등입니다.

적절하게 캡슐화하는 방법은 무엇인가요?

공통점을 추출하고 차이점을 유지하세요.

캡슐화하는 가장 좋은 방법은 공통성을 구성 요소로 추출하고 다른 구성 요소를 슬롯으로 노출하는 것입니다.
슬롯을 예약하면 사용자는 자신의 필요에 따라 슬롯에 삽입할 콘텐츠를 결정할 수 있습니다.
검색창인지, 텍스트인지, 메뉴인지. 결정하는 것은 발신자의 몫입니다.

슬롯의 기본 사용

• 하위 구성 요소에서는 특수 요소를 사용하여 하위 구성 요소에 대한 슬롯을 열 수 있습니다.
• 이 슬롯에 삽입되는 내용은 상위 구성 요소가 어떻게 사용되는지에 따라 다릅니다.

간단한 예를 사용하여 하위 구성 요소에 대한 슬롯을 정의합니다.
<slot></slot>의 콘텐츠는 구성 요소에 다른 콘텐츠가 삽입되지 않으면 기본적으로 표시된다는 의미입니다. . Content<slot></slot>中的内容表示，如果没有在该组件中插入任何其他内容，就默认显示该内容

nbsp;html>



    <meta>
    <meta>
    <title>Document</title>
    <script></script>



    <div>
        <cpn><button>按钮</button></cpn>
        <cpn><span>aaaaa</span></cpn>
    </div>
    <template>
        <div>
            <h2 id="我是子组件">我是子组件</h2>
            <h3 id="hahaha">hahaha</h3>
            <slot></slot>
        </div>
    </template>
    <script>
        let app = new Vue({
            el: &#39;#app&#39;,
            components: {
                cpn: {
                    template: &#39;#cpn&#39;,
                }
            }
        })
    </script>

具名插槽 slot

当子组件的功能复杂时，子组件的插槽可能并非是一个。

比如我们封装一个导航栏的子组件，可能就需要三个插槽，分别代表左边、中间、右边。那么，外面在给插槽插入内容时，如何区分插入的是哪一个呢？

如何使用具名插槽呢？

• 只要给slot元素一个name属性即可
• <slot name="'myslot'"></slot>

nbsp;html>



    <meta>
    <meta>
    <title>Document</title>
    <script></script>



    <div>
        <cpn><button>按钮1</button></cpn>
        <cpn><span>aaaaa</span>
            <button>按钮2</button></cpn>
    </div>
    <template>
        <div>
            <h2 id="我是子组件">我是子组件</h2>
            <h3 id="hahaha">hahaha</h3>
            <slot></slot><br>
            <slot></slot>
        </div>
    </template>
    <script>
        let app = new Vue({
            el: &#39;#app&#39;,
            components: {
                cpn: {
                    template: &#39;#cpn&#39;,
                }
            }
        })
    </script>

作用域插槽

实质：

父组件替换插槽的标签，但是内容由子组件来提供。

需求：

子组件中包括一组数据，比如：pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++']
需要在多个界面进行展示：

• 某些界面是以水平方向一一展示的
• 某些界面是以列表形式展示的
• 某些界面直接展示一个数组

内容在子组件，希望在父组件中展示：

• 利用slot作用域插槽

在父组件使用我们的子组件时，从子组件中拿到数据：

• 通过<template slot-scope="slotProps"></template>获取到slotProps属性
• 通过slotProps.data

<div>
        <cpn></cpn>
        <cpn>
            <template>
                <span>{{slot.data.join('-')}}</span>
            </template>
        </cpn>
        <cpn>
            <template>
                <span>{{slot.data.join('*')}}</span>
            </template>
        </cpn>
    </div>

이름이 지정된 삽입 Slot

하위 구성요소의 기능이 복잡할 경우 하위 구성요소의 슬롯이 하나가 아닐 수도 있습니다. 예를 들어 탐색 모음의 하위 구성 요소를 캡슐화하는 경우 각각 왼쪽, 가운데, 오른쪽을 나타내는 세 개의 슬롯이 필요할 수 있습니다. 그렇다면 슬롯에 콘텐츠를 삽입할 때 어떤 콘텐츠가 삽입되었는지 어떻게 구별할 수 있을까요?

🎜네임드 슬롯을 어떻게 사용하나요? 🎜🎜🎜슬롯 요소에 이름 속성을 지정하세요🎜🎜<slot name="myslot"></slot>🎜🎜

<template>
        <div>
            <slot>
                <ul>
                <li>{{item}}</li>
                </ul>
            </slot>
        </div>
    </template>

🎜🎜Scope 슬롯🎜🎜

본질: 🎜🎜상위 구성 요소는 슬롯의 레이블을 대체하지만 콘텐츠는 하위 구성 요소🎜에서 제공됩니다. 🎜

요구 사항:

🎜하위 구성 요소에는 다음과 같은 데이터 세트가 포함됩니다. pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++'] 코드 >🎜 여러 인터페이스에 표시되어야 함: 🎜🎜🎜일부 인터페이스는 가로 방향으로 하나씩 표시됩니다.🎜🎜일부 인터페이스는 목록 형식으로 표시됩니다.🎜🎜일부 인터페이스는 직접 배열로 표시됩니다.🎜🎜🎜내용은 하위 구성 요소, 상위 구성 요소에 표시되기를 바랍니다. 🎜🎜🎜🎜슬롯 범위 슬롯 사용 🎜🎜🎜🎜상위 구성 요소가 하위 구성 요소를 사용할 때 하위 구성 요소에서 데이터를 가져옵니다. 🎜🎜🎜 <code>를 통해 slotProps 속성 가져오기🎜🎜 slotProps.data🎜🎜

nbsp;html>



    
    
    
    <script></script>



    <div>
        <cpn></cpn>
        <cpn>
            <template>
                <span>{{slot.data.join('-')}}</span>
            </template>
        </cpn>
        <cpn>
            <template>
                <span>{{slot.data.join('*')}}</span>
            </template>
        </cpn>
    </div>
    <template>
        <div>
            <slot>
                <ul>
                <li>{{item}}</li>
                </ul>
            </slot>
        </div>
    </template>
    <script>
        let app = new Vue({
            el: &#39;#app&#39;,
            components: {
                cpn: {
                    template: &#39;#cpn&#39;,
                    data() {
                        return {
                            pLanguages: [&#39;JavaScript&#39;, &#39;Python&#39;, &#39;Swift&#39;, &#39;Go&#39;, &#39;C++&#39;],
                        }
                    }
                }
            }
        })
    </script>

rrreee🎜🎜🎜rrreee🎜를 통해 방금 전달한 데이터를 가져올 수 있습니다. [관련 권장 사항: 🎜javascript 비디오 튜토리얼🎜, 🎜vue.js 튜토리얼🎜]🎜

위 내용은 구성 요소 확장성을 높이기 위해 슬롯에 대한 자세한 설명을 Vue로 제공합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!