插槽

vue學習之插槽~~~

插槽（Slot）是Vue提出來的一個概念，正如名字同樣，插槽用於決定將所攜帶的內容，插入到指定的某個位置，從而使模板分塊，具備模塊化的特質和更大的重用性。

我的理解：我感受插槽就是父組件控制插槽的內容。他是用什麼標籤展現的，以及他要展現的內容。子組件來控制插槽插入的位置。

插槽的分類：插槽分爲三種。匿名插槽，具名插槽，還有做用域插槽

匿名插槽：也就是默認插槽。把父組件中的內容默認插入到子組件的中<slot></slot>只的位置。

 

 

下面是展現在頁面中的效果

 

具名插槽： 具名插槽會把就是子組件會把他的每一個插槽都賦予一個名字（name）。而後子組件會根據父組件中所攜帶的指令參數來把父組件中的內容插入到相應的位置。

若是slot插槽沒有給名字，那麼這個插槽就至關於默認插槽，父組件中v-slot不傳參的值就會插入到這裏。

// 這是父組件 
<div class="father">
    <p>我是父組件</p>
    <!-- 引入子組件 -->
    <basepage>
      <template v-slot:header>
        <!-- 放入要插入在子組件中的內容 -->
        <p class="con">我是父組件插入的header內容</p>
        <br>
      </template>
      <template v-slot:footer>
        <!-- 放入要插入在子組件中的內容 -->
        <p class="con">我是父組件插入的footer內容</p>
      </template>
      <P>我是父組件中不攜帶參數的那個</P>
      <br>
    </basepage>
  </div>

//這是子組件

　　<template>

  　　<div class="son">

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

    　　<br>

    　　<p>下面是父組件插入的內容:</p>

    　　<br>

    　　<template>

      　　<!-- v-slot中參數爲header的將插入這裏 -->

      　　<slot name="header"></slot>

      　　<!-- 父組件中不傳遞參數的將插入這裏 -->

      　　<slot ></slot>

      　　<!-- v-slot中參數爲footer的將插入這裏 -->

      　　<slot name="footer"></slot>

    　　</template>

  　　</div>

　　</template>

　　

 

展現的效果

 

 

 

 

 

 做用域插槽：實現父組件能夠訪問子組件裏面的數據

用通俗的話來說就是父組件替換子組件當中的標籤，可是內容由子組件來提供。

  // 父組件哈
<div class="father">
    <p>我是父組件</p>
    <!-- 引入子組件 -->
    <basepage>
      <template  v-slot='news'>
        <!-- 放入要插入在子組件中的內容 -->
        <p class="con">我是父組件插入的footer內容</p>
        <br>
        <p>我是子組件中的內容:{{news.info}}</p>
      </template>
    </basepage>
  </div>


// 子組件
<template>
  <div class="son">
    <p>我是子組件</p>
    <br>
    <p>下面是父組件插入的內容:</p>
    <br>
    <template>
      <slot :info='message'></slot>
    </template>
  </div>
</template>
<script>
export default {
  name:'basepage',
  data() {
    return {
      message:"加油呀"
    }
  }
}

 

 

 補充一些特殊的狀況

補充一：咱們能夠在子組件中的slot中寫入一些標籤，若是父組件中沒有寫入標籤時，那麼就默認展現子組件中的把標籤及內容，

// 父組件  
<div class="father">
    <p>我是父組件</p>
    <!-- 引入子組件 -->
    <basepage>
    </basepage>
  </div>

// 子組件

<template>
  <div class="son">
    <p>我是子組件</p>
    <br>
    <p>下面是父組件插入的內容:</p>
    <br>
    <template>
      <P>今天很開心啊,嘻嘻</P>
    </template>
  </div>
</template>

補充二：v-slot在有插槽名字的狀況下能夠簡寫爲#，在沒有插槽的狀況下不能這麼寫哈。

<!-- 這樣會觸發一個警告 -->
<current-user #="{ user }">
  {{ user.firstName }}
</current-user>
若是你但願使用縮寫的話，你必須始終以明確插槽名取而代之：

<current-user #default="{ user }">
  {{ user.firstName }}
</current-user>

 補充三：關於做用域插槽和具名插槽放一塊的寫法。

// 這是父子組件中引入的子組件
<div >
<p>我是父組件</p>
<children>
　　　　　　// 直接在名字後面附上綁定的值就好
　　　　　　<template  v-slot:fagognzi='content'>

                <!-- 按鈕 -->
                <div v-if="rendWage(content.item, content.index)">
                    <el-button type="danger" size="small" plain round @click="onPaysendWage(content.item)">發工資</el-button>
                </div>
            </template>

</children>