vue插槽（slot）詳解

最近被問起是否了解vue的插槽（slot），咋一想發現，似乎很少用到這玩意。所以整理了下slot的一些用法。

vue 實現了一套內容分發的 api，將元素作為承載分發內容的出口，這是vue文件上的說明。具體來說，slot就是可以讓你在元件內新增內容的『空間』。舉個例子：

//子元件： (假設名為：ebutton) //父元件：（引用子元件 ebutton）

我們知道，如果直接想要在父元件中的中新增內容，是不會在頁面上渲染的。那麼我們如何使新增的內容能夠顯示呢？在子元件內新增slot 即可。

//子元件： (假設名為：ebutton) //slot 可以放在任意位置。（這個位置就是父元件新增內容的顯示位置）

子元件可以在任意位置新增slot , 這個位置就是父元件新增內容的顯示位置。

上面我們了解了，slot 其實就是能夠讓我們在父元件中新增內容到子元件的『空間』。我們可以新增父元件內任意的data值，比如這樣：

//父元件：（引用子元件 ebutton）
new vue(
})

使用資料的語法完全沒有變，但是，我們能否直接使用子元件內的資料呢？顯然不行！！

// 子元件 ： (假設名為：ebutton)
new vue(
})// 父元件：（引用子元件 ebutton）

直接傳入子元件內的資料是不可以的。因為：父級模板裡的所有內容都是在父級作用域中編譯的；子模板裡的所有內容都是在子作用域中編譯的。

所謂的後背內容，其實就是slot的預設值，有時我沒有在父元件內新增內容，那麼 slot就會顯示預設值，如：

//子元件 ： (假設名為：ebutton)
這就是預設值

有時候，也許子元件內的slot不止乙個，那麼我們如何在父元件中，精確的在想要的位置，插入對應的內容呢？給插槽命乙個名即可，即新增name屬性。

//子元件： (假設名為：ebutton) 這就是預設值1 這就是預設值2 這就是預設值3

父元件通過v-slot : name 的方式新增內容：

//父元件：（引用子元件 ebutton）這是插入到two插槽的內容這是插入到three插槽的內容

當然 vue 為了方便，書寫 v-slot:one 的形式時，可以簡寫為 #one

通過slot 我們可以在父元件為子元件新增內容，通過給slot命名的方式，我們可以新增不止乙個位置的內容。但是我們新增的資料都是父元件內的。上面我們說過不能直接使用子元件內的資料，但是我們是否有其他的方法，讓我們能夠使用子元件的資料呢？其實我們也可以使用v-slot的方式：

//子元件： (假設名為：ebutton) 這就是預設值1 //繫結child1的資料這就是預設值2 //繫結child2的資料，這裡我沒有命名slot new vue( })//父元件：（引用子元件 ebutton） } // 同上，由於子元件沒有給slot命名，預設值就為default

總結來說就是：