Vue插槽slot怎么使用

這篇文章主要講解了“Vue插槽slot怎么使用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Vue插槽slot怎么使用”吧！

一、插槽的含義

插槽 slot 是寫在子組件的代碼中，供父組件使用的占位符。在代碼中，大致寫為如下的形式，后面會進行詳細的寫法介紹。

<slot> </slot>

插槽其實就是在寫 slot 的地方挖個坑，等著組件的使用者，即父組件，進行填充。子組件中使用插槽 slot 后，父組件可以在這個占位符中填充內容，包括數據、html代碼、組件等，也就是說，當子組件的某部分內容是根父組件填充的不同而變化的，那我們就可以使用插槽slot，具體填充什么，由父組件而定。

讓父組件向子組件指定位置插入html結構，也是一種組件間通信的方式，適用于父組件 => 子組件

話不多說，下面，我們就來看看 slot 的具體如何使用吧！

二、插槽的三種使用方法

1.默認插槽

有兩個組件，App是父組件，Child是子組件

父組件代碼如下：

<template>

  <div class="parent">

    <span>我是父組件</span>

    <Child></Child>

  </div>

</template>

<script>

import Child from './components/Child'

export default {

  name:'app',

  components:{

    Child

  }

}

</script>

<style scoped>

.parent{

  width: 400px;

  height: 400px;

  background-color: #bfa;

}

</style>

子組件的代碼：

<template>

  <div class="child">

    <div>我是子組件</div>

    <br>

    <slot>我是默認插槽，當父組件不填充任何內容時，我這句話才會出現</slot>

  </div>

</template>

<script>

export default {

  name:'Child',

  data（） {

    return {

    }

  },

};

</script>

<style>

.child {

  width: 200px;

  height: 200px;

  background-color: lightblue;

  margin: auto;

}

</style>

啟動項目，在瀏覽器中顯示：

 這時候，我們已經使用 slot ，在子組件中占了一個坑，但是我們還沒有填充內容，接下來填充內容：

 可以看到，填充的內容，確實在子組件中顯示

假如，我們去掉子組件的插槽，父組件在子組件填充的內容還能看到嗎？我們來試一試：

可以看到：瀏覽器中，只顯示兩個組件原本的信息，父組件填充的內容是看不到的。

在 slot 中，不僅可以填充文字，也可以填充圖片、視頻、HTML結構等，如填充圖片：

瀏覽器中顯示如下： 

2.具名插槽

具名插槽，顧名思義，就是帶有名字的插槽，具有 name 屬性，一個不帶 name 的 <slot> 會帶有默認的名字 default 。

在子組件中，slot 指定 name 屬性

<template>

  <div class="child">

    <div>我是子組件</div>

    <br>

    <slot name="content">

      我是插槽默認的內容，當父組件不填充任何內容時，我這句話才會出現

    </slot>

  </div>

</template>

<script>

export default {

  name:'Child',

  data（） {

    return {

    }

  },

};

</script>

<style>

.child {

  width: 200px;

  height: 200px;

  background-color: lightblue;

  margin: auto;

}

</style>

在父組件中，需要使用 template ，在 template 模板中，指定 slot 在子組件中的 name 值

<template>

  <div class="parent">

    <span>我是父組件</span>

    <Child>

      <template slot="content">

        <div>這是父組件在子組件中填充的內容，在子組件中顯示</div>

        <br />

        <img src="https://cache.yisu.com/upload/information/20220117/488/17823.jpg" alt="" />

      </template>

    </Child>

  </div>

</template>

<script>

import Child from "./components/Child";

export default {

  name: "app",

  components: {

    Child,

  },

};

</script>

<style scoped>

.parent {

  width: 400px;

  height: 400px;

  background-color: #bfa;

}

img {

  width: 200px;

}

</style>

 瀏覽器可以正常顯示填充的內容：

 假如，我們在父組件中，只寫了 template ，并沒有指定 slot 在子組件中的 name 值，

 那么，瀏覽器中：

 也就是說，在引用子組件的代碼中， template 中的slot 是根據等號 = 后面的值，來尋找對應的插槽 slot ，從而在對應的位置上，填充相應的內容。當我們使用的插槽數量比較多時，具名插槽就有很大的實用性。

3.作用域插槽

 如果數據在子組件，可以在子組件中直接使用數據，但根據數據生成的結構需要組件的使用者來決定，我們就需要用到作用域插槽，同時，我們也可以實現多種結構。

例如：games數據在子組件中，但使用數據所遍歷出來的結構由父組件App決定

子組件中，使用 <slot :games="games"> 指明使用什么數據，并將數據傳給插槽的使用者

<template>

  <div class="child">

    <span>我是子組件</span>

    <h6>{{title}}</h6>

    <slot :games="games">

      我是插槽默認的內容，當父組件不填充任何內容時，我這句話才會出現

    </slot>

  </div>

</template>

<script>

export default {

  name:'Child',

  props:['title'],

  data（） {

    return {

      games:['紅色警戒','穿越火線','超級瑪麗'],

    }

  },

};

</script>

<style>

.child {

  width: 200px;

  height: 200px;

  background-color: lightblue;

  margin: auto;

}

</style>

 在父組件中，使用子組件通過插槽傳遞過來的數據，渲染結構，有3種形式：

<template>

  <div class="parent">

    <span>我是父組件</span>

    <Child title="游戲1">

<template scope="youxi1">

        <!-- 無序列表結構 -->

<ul>

<li style="color:red" v-for="（g,index） in youxi1.games" :key="index">{{g}}</li>

</ul>

</template>

</Child>

    <hr>

    <Child title="游戲2">

      <template slot-scope="youxi2">

        <!-- 有序列表結構 -->

        <ol>

          <li v-for="（g,index） in youxi2.games" :key=index>{{g}}</li>

        </ol>  

      </template>

    </Child>

    <hr>

    <Child title="游戲3">

      <template scope="{games}">

        <!-- h5結構 -->

        <h6 v-for="（g,index） in games" :key=index>{{g}}</h6>

      </template>

    </Child>

    <hr>

  </div>

</template>

<script>

import Child from "./components/Child";

export default {

  name: "app",

  components: {

    Child,

  },

};

</script>

<style scoped>

.parent {

  width: 400px;

  height: 700px;

  background-color: #bfa;

}

img {

  width: 200px;

}

</style>

瀏覽器中：

 第1種：是基本用法，使用 scope = "  youxi1 "，youxi1 是自定義的變量，來接收子組件傳過來的數據，它是一個對象，使用插值語法，把 youxi1 打印出來：

 第2種：將 scope 替換為 slot-scope

第3種：使用 es6 解構賦值的方法，直接將對象數據解構為數組，然后進行 v-for 的遍歷

上述的小案例，就實現了：使用同樣的數據，父組件將其渲染成不同的結構，非常方便實用。 

4.版本變化

 Vue 2.6.0 起，引入了 v-slot ,上文提到了3類插槽的 slot 和 slot-scope ，可以直接替換為 v-slot ，在vue2版本中，我們仍可以使用 slot 和 slot-scope ，但是在vue3中就只能使用v-slot了。詳細內容參見 vue官方文檔 的解釋。

感謝各位的閱讀，以上就是“Vue插槽slot怎么使用”的內容了，經過本文的學習后，相信大家對Vue插槽slot怎么使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！