Vue slot 插槽的使用

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

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

let btn = vue.component('btn', 

},template: `1
` })

let vm = new vue(,

template: `
` })

這樣得到的所有外掛程式都是前篇一律，很單調。

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

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

let btn = vue.component('btn', 

},template: `
` })

let vm = new vue(,

template: `123
` })

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

vue slot插槽的使用

vue官方文件在slot這部分講解的並不是很詳細，這裡用更通俗的語言進行描述。根據官檔的標題來開始吧 假如父元件的 如下 children為註冊的子元件 這裡是插槽的內容，位於子元件內部 渲染結果 這裡是子元件，注意 沒有加入slot標籤哦！上面的 實際效果如下 這裡是父元件 這裡是子元件，注意 沒...

Vue slot插槽的使用

lang en charset utf 8 插槽title head slot slot1 up value data title up slot slot2 down value book v for book in books down shouhe div src script src scr...

vue slot插槽的使用

slot插槽的使用場景 父元件向子元件傳遞dom時會用到插槽 作用域插槽 當同乙個子元件想要在不同的父元件裡展示不同的狀態，可以使用作用域插槽。展示的狀態由父元件來決定 注 想要修改父元件向子元件傳遞的元素的樣式時，只能在對應的子元件進行修改 1.具名插槽的使用 父元件 slot header 我是...