vue 插槽的基本使用

之前我們使用的元件他的拓展性是特別差的，因為元件的內部標籤是固定寫死的，就會導致這個元件的復用性很差，比如乙個導航欄元件，他裡面的組成部分是根據需求不同而定的，因此裡面的標籤不能寫死，而插槽的出現剛好能解決這個問題，乙個元件裡面預留幾個空間，根據需求往裡面填充不同的標籤，這就是插槽

下面我們看下**：

我是按鈕

3 我是子元件

從上面的**可以總結3個知識點：

1. 在模板定義乙個插槽，當使用元件時不新增任何標籤時，插槽是空的

2. 要填充插槽，只需要往子元件中插入乙個標籤即可

3. 插槽是可以有預設標籤的，只需要在裡加標籤即可

4. 當只有乙個插槽，但是插了好幾個標籤，這時候這幾個標籤會被視為乙個整體插入到該插槽中。

最後再說一下父子元件的關係和元件和插槽的關係的區別所在：

1. 一般我們會把比較固定的**封裝成乙個元件，目的是為了方便最大地復用，比如現在有乙個父元件，這個父元件需要乙個導航欄元件，那就找乙個已經寫好的導航欄的子元件插到父元件中；總結就是元件是已經固定套路的**

2. 元件和插槽的關係是動態的，因為你不知道元件的布局和元素是什麼，這時候我們就不能提前把子元件給寫好了，得根據具體情況判斷，這種元件和插槽的關係會更靈活，但復用性會低一點。