技術標籤：vue前端vuehtml前端js

我們在前幾期已經說過了元件的各種知識。

接下來我們就要學習插槽的內容了，插槽是Vue元件化開發的拓展內容。
官方文件種解釋插槽的作用就是：在vue中實現的一套分發內容的API，將slot元素作為承載內容分發出口。

用大白話說就是：想要在一個元件標籤中新增新的內容，必須在該元件內宣告一個slot元素，否則，新增的新內容則不會被渲染。

通常我們會在vue中將各種通用的功能單獨拿出來進行封裝，以便於後面複用，但是有時候需要複用的元件不是完美契合，這個時候就需要用到插槽，slot可以讓使用者拓展元件，更好的實現元件的複用。

接下來我們用一個簡單的例子實現一下匿名插槽

我們現在設想一個業務場景，我們現在在做登入註冊頁面，登入註冊的頁面會有很多的按鈕，當我們開發元件的時候，如果還像之前一樣開發元件，我們會遇到哪些問題？

如果現在要做兩個按鈕，一個登入一個註冊，元件化開發，它們的基本的內容架構是很類似的，我們要開發兩個元件嗎？
顯然太笨重，違背元件化開發的初衷。
這個時候就要用到插槽了。

<div id="app">
    <App></App>
</div>

<script>
    Vue.component('MBtn',{
        template:`
            <button>
                <slot></slot>
            </button>
        `
 

    })
    const App = {
        data () {
            return {
                title:'老爹'
            }
        },
        template:`
            <div>
               <MBtn><a href="#">登入</a></MBtn>
               <MBtn>註冊</MBtn>
            </div>
        `
 
,
    }
    new Vue({
        el:'#app',
        data:{

        },
        components: {
            App
        }
    });
</script>

我們寫了一個全域性元件MBtn，也就是按鈕。
在模板中，我們要尤其注意一點，在簡單的button標籤中，我寫了一個slot標籤，這個就是匿名插槽。
然後我們在區域性元件App中，使用一下這個MBtn全域性按鈕元件。

插槽的好處是什麼？

我們可以在使用的時候在這個元件的內部寫需要的東西。
也就是我們之前提到的註冊和登入，如果不用插槽的話，是沒有辦法直接在不使用JS的層面解決這個問題的。

具體看一下App這個區域性元件的template模板中的內容，我們使用了兩次這個MBtn元件，在裡面可以任意巢狀想寫的東西。

這樣我們只需要使用一個元件就可以分別開發註冊和登入按鈕。

是不是很方便。
在一個頁面中可能有很多很多的按鈕，如果我們不用插槽的話，我們是沒法在其中任意巢狀我們想用的內容的，就顯得很死板。

其實插槽就可以簡單理解為，我在那裡留了一個位置，我還沒有想好要放什麼東西，但是我要先佔著，等我想放東西，隨時放。

插槽是分很多種的，我們這期先暫時瞭解一下匿名插槽的內容，後續的內容持續更新。

有微信小程式課設、畢設需求聯絡個人QQ：505417246

關注下面微信公眾號，可以領取微信小程式、Vue、TypeScript、前端、uni-app、全棧、Nodejs、Python等實戰學習資料
最新最全的前端知識總結和專案原始碼都會第一時間釋出到微信公眾號，請大家多多關注，謝謝！