Vue slot 插槽的使用

 

slot插槽作爲分發內容的出口

假設看這篇文章的你已經有了一定的Vue組件基礎

let btn = Vue.component('btn', {
        data() {
            return {}
        },
        template: `<button>1
</button>`
    })

上述代碼創建了一個名爲btn的全局組件。接下來我們在其他頁面中調用這個插件

let vm = new Vue({
        el: '#app',
        data: {
            name: 'wxs'
        },
        template: `<div>
                   <btn></btn>
                   <btn></btn>
                   <btn></btn>
            </div>`
    })

得到的頁面效果如下

這樣得到的所有插件都是前篇一律，很單調。

這時我們可以使用slot插槽來滿足不同組件的需要。

我們在組件的button中加入slot，如下圖所示

let btn = Vue.component('btn', {
        data() {
            return {}
        },
        template: `<button><slot></slot>
</button>`
    })

然後就可以對組件進行插值

let vm = new Vue({
        el: '#app',
        data: {
            name: 'wxs'
        },
        template: `<div>
                   <btn>1</btn>
                   <btn>2</btn>
                   <btn>3</btn>
            </div>`
    })

得到的頁面效果如下

以上就是slot最基本的用法，如果嚮往組件分發兩個及以上的內容的話，我們需要用到更高級的具名插槽。