Vue中slot與slot-scope的理解及使用

以前使用過vue，但是從來沒有用過插槽slot，最近突然看到slot，發現有點不會用，因此決定系統的學習一下插槽slot。

但是在查看了vue文檔后，感覺說的太籠統，讓人難以理解，因此在網上查了很多資料，終於感覺自己對插槽slot有了一定的了解，決定記錄下來，希望能幫到和我一樣對插槽slot不懂的朋友。

對於官網文檔中說的我就在此不復述了，感覺如果看懂的了的，也就不需要閱讀這篇文章了。

首先要知道，插槽分兩類，默認插槽和具名插槽；通俗理解就是默認插槽是沒有名稱的插槽，具名插槽是有名稱的插槽。

何時使用插槽？

簡單的舉個栗子：有2個組件，父組件father，子組件son。

父組件 father

<template>
  <div>
    <h3>這是父組件</h3>
    <son>實踐slot</son>
  </div>
</template>

子組件 son

<template>
  <div>
    <h4>這是子組件</h4>
    <input type="text" placeholder="請輸入">
  </div>
</template>

一般我們的組件都會怎么寫，但是這么寫的話，會發現子組件中的實踐slot是顯示不出來的。如果需要讓他顯示出來，這時我們就可以用到插槽slot了。

如何使用插槽？

首先，子組件中我們要添加插槽slot，

<template>
  <div>
    <h4>這是子組件</h4>
    <input type="text" placeholder="請輸入">
    <slot></slot>
  </div>
</template>

這時，終於出現了slot。slot的位置就會出現父組件中實踐slot這幾個大字。

如圖：

可以看到，這里面slot是沒有名稱的，顧名思義，這是插槽中的默認插槽。

然后在看看具名插槽，直接上代碼，一目了然，

父組件

<template>
  <div>
    <h3>這是父組件</h3>
    <son><span>實踐slot</span></son>
    <son>
       <template slot="myslot">
          <div>實踐具名slot</div>
       </template>
    </son>
  </div> 
</template>

子組件

<template>
  <div>
    <h4>這是子組件</h4>
    <input type="text" placeholder="請輸入">
    <slot></slot>
    <slot name="myslot"></slot>
  </div>
</template>

可以看出，和默認插槽不同的是，在子組件中，我們給插槽一個name屬性，這個就是插槽的名稱，同時在父組件中，我們在需要將內容插入的地方標簽上加了一個slot屬性，他的值就是我們的slot 名稱name。

效果如下圖：

上面就是2中插槽，默認插槽和具名插槽的用法。

下來是slot-scope。slot-scope是作用域插槽。

官網中有一句特別強調的話：父組件模板的所有東西都會在父級作用域內編譯；子組件模板的所有東西都會在子級作用域內編譯。簡單的所，就是父組件中不能直接用自組件中定義的data數據。而slot-scope的出現就是解決了這樣的問題。如下代碼

父組件

<template lang="">
  <div>
    <h3>這是父組件</h3>
    <son>
      <template slot="myslot" slot-scope="scope">
        <ul>
          <li v-for="item in scope.data">{{item}}</li>
        </ul>
      </template>
    </son>
  </div> 
</template>

子組件

<template>
  <div>
    <h4>這是子組件</h4>
    <input type="text" placeholder="請輸入">
    <slot name="myslot" :data='list'></slot>
  </div>
</template>
 
<script>
  export default {
    name:'Son',
    data(){
      return{
        list:[
          {name:"Tom",age:15},
          {name:"Jim",age:25},
          {name:"Tony",age:13}
        ]
      }
    }
  }
</script>

首先先看下效果，

其中，下方三個對象的值，我們本身是在子組件中定義的，按照官方文檔中說的，本來父組件中是無法顯示出來這些數據的，但是為什么現在顯示出來了呢？？？這就要歸功於我們強大的slot-scope了。

首先，在子組件中的插槽上有一句data="list"，而在父組件中也有slot-scope="scope"，slot-scope就是取data的值，slot-scope的值是自定義的，我們可以取任何名稱，但是data的值傳過來時是以對象形式傳輸的，所以在這scope.data才是list的值。

這樣我們就可以在父組件中取到子組件的值，並且加以應用了。

以上就是我對vue中插槽的理解，有不對的地方歡迎指出，我們一起進步，一起學習。

 

PS:轉自Vue中slot與slot-scope的理解及使用_fang562878311的博客-CSDN博客