Vue詳解之增加組件擴展性的slot

這篇文章為大家帶來了關於vue的相關知識，其中主要介紹了增加組件擴展性的slot的相關問題，組件的插槽也是為了讓我們封裝的組件更加具有擴充性，讓使用者可以決定元件內部的一些內容到底展示什麼，下面一起來看一下，希望對大家有幫助。

【相關推薦：javascript影片教學、vue.js教學】

slot 插槽

元件的插槽

• #元件的插槽也是為了讓我們封裝的元件更有擴展性。

• 讓使用者可以決定元件內部的一些內容到底要展示什麼。

如何去封裝這類的元件呢？ slot

它們也很多區別，但也有很多共性。

如果，我們每一個單獨去封裝一個元件，顯然不合適：例如每個頁面都返回，這部分內容我們就要重複去封裝。
但是，如果我們封裝成一個，好像也不合理：有些左側是選單，有些是返回，有些中間是搜索，有些是文字，等等。

如何封裝合適呢？

抽取共通性，保留不同。

最好的封裝方式就是將共性抽取到元件中，將不同曝光為插槽。
一旦我們預留了插槽，就可以讓使用者根據自己的需求，決定插槽中插入什麼內容。
是搜尋框，還是文字，還是選單。由調用者自己決定。

slot基本上使用

• 在子元件中，使用特殊的元素就可以為子元件開啟一個插槽。
• 該插槽插入什麼內容取決於父元件如何使用。

透過一個簡單的例子，來為子元件定義一個插槽：
<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就可以取得到剛才我們傳入的data了

#

<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>

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>

【相關推薦：javascript影片教學、vue.js教學】

以上是Vue詳解之增加組件擴展性的slot的詳細內容。更多資訊請關注PHP中文網其他相關文章！